如何实现图片全屏显示且不被放大？CSS样式设置求助

你现在的CSS只搞定了全屏遮罩容器的样式，但内部图片的缩放规则没定义，所以不管怎么调容器样式，图片比例都不会变。要实现「全屏显示但不被放大」的效果，得给容器里的<img>标签加样式：

.full-img{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 新增图片控制样式 */
.full-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

关键属性作用： #

• max-width: 100%/max-height: 100%：限制图片最大尺寸不超过容器（即屏幕）的宽高，确保不会超出全屏范围；如果原图比屏幕小，也不会被强制放大。
• object-fit: contain：让图片保持原有宽高比例，完整显示在容器内，不会被拉伸变形。

如果你的HTML结构是类似这样的，直接套用上面的样式即可：

<div class="full-img">
    <img src="你的图片路径" alt="全屏图片">
</div>

内容的提问来源于stack exchange，提问作者EvenImsland