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

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

取代min-width和min-height，在.full-screen img中使用max-width和max-height。

min-width意味着尺寸不会缩小到该宽度以下（当然，高度相同）。