javascript - 如何做支持水平和垂直方面的比例图库？

Question

即使视口(viewport)或父元素的纵横比发生变化，我也试图让图像保持比例。

到目前为止我有 this fiddle 利用某些技术将图像设置为全屏背景。不幸的是，一旦达到一定大小，它就会溢出，部分图像会被隐藏。

HTML

<div class="full-screen">
    <img src="http://placehold.it/350x150" />
</div>

CSS

.full-screen {
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%;
}
.full-screen img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%;
      min-height: 50%;
}

理想情况下，我从不希望图像被裁剪，我总是希望它根据宽高比占据全宽或全高。

这是一张图片，希望能让它更容易理解:

如果单独使用 CSS 无法做到这一点，您如何使用 jQuery 计算调整大小？

我看过这里的帖子，就像他的一样:

Proportionally resize image based on parent div size

建议我将图像的高度设置为auto，但这似乎不起作用。

Answer 1

在 .full-screen img 中使用 max-width 和 max-height，而不是 min-width 和 min-height。

min-width 表示尺寸不会缩小到该宽度以下(当然高度也一样)。