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

Question

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

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

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 表示尺寸不会缩小到该宽度以下（当然，高度也是如此）。