CSS“缩放”图像以适应浏览器窗口的高度和宽度

Question

我正在生成一个静态站点，其中图像设置在响应式“图片框架”内，因此无论图像的长宽比如何，垫子每一侧的尺寸都相同。 这运作良好；然而...

我想确保整个“图片框”在浏览器窗口中可见。目前，框架的大小取决于宽度，这意味着高图像会从底部滚动。

有人可以查看我的代码并建议我如何动态调整“图片框架”的大小，使其在浏览器窗口中 100% 可见吗？

这里有一个 JSFiddle - link

.frame {
    position: relative;
    width: 100%;
    background: black;
    box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.3);
}

.mat {
    position: absolute;
    background: white;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}

.art {
    position: absolute;
}

.art img {
    width: 100%;
}

.art:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}

<div class="frame" style="padding-bottom: 115.09%">
  <div class="mat" style="top: 2.1721%; bottom: 2.1721%; left: 2.50%; right: 2.50%;">
    <div class="art" style="top: 11.354%; bottom: 11.354%; left: 13.158%; right: 13.158%;">
      <img src="https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg" />
    </div>
  </div>
</div>

谢谢

Answer 1

我们可以将

width: 100%

和

height: 100vh

添加到

parent div

并根据需要添加

width: 100%

、

height: 100%

和

object-fit: cover

或

object-fit: contain

。

这是插图。检查我提供的链接，它将帮助您更好地理解，如果我遗漏或误解了某些内容，请分享。谢谢你。