仅水平裁剪图像/`max-width: 100%`不限制图像大小？

Question

考虑以下样式：

.container {
  display: flex;
  width: 100vw;
}

.container > div {
  min-width: 20rem;
}

.container > img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
}

给定以下 HTML 正文：

<div class="container">
  <img src="https://static.vecteezy.com/system/resources/previews/021/615/987/original/tv-signal-test-screen-retro-television-color-test-vector.jpg">
  <div>
    Hi mom!
  </div>
</div>

（https://jsfiddle.net/2jbxtyz7/）

容器内的图像现在将根据父容器内的可用空间调整大小（这取决于我的示例中的浏览器窗口）。当窗口（以及可用空间）变小时，图像将被裁剪。然而，即便如此，您仍然可以从上到下看到完整的高度，因为只有侧面被裁剪。

但是，当窗口变大时，图像的宽度也会增加。为了保持纵横比，图像的顶部和底部将被裁剪。我不希望图像的顶部和底部被裁剪 - 我宁愿图像在达到保持给定高度的纵横比的宽度时停止增长。

这应该很简单：我将

width: 100%

更改为

max-width:100%

，因此当可用尺寸小于实际图像尺寸时，图像应该缩小，但当可用尺寸大于实际图像尺寸时，图像不应增大，对吧？

https://jsfiddle.net/2jbxtyz7/1/

不！将

width

更改为

max-width

会完全禁用宽度约束：当小于其实际大小时，图像不会被裁剪，而是会溢出！

图像怎么会溢出

max-width: 100%

？当元素的“自然”宽度大于给定值时，

width

和

max-width

的行为不应该相同吗？

我真的很困惑——有人有解释吗？

我尝试的另一件事是将宽度设置为

min(100%,auto)

，但

min

函数似乎不接受

auto

作为参数。

有没有人找到一种方法来获得我们在小浏览器窗口上使用

width: 100%

的行为（图像在侧面被裁剪），同时仍然防止图像增长超过我们设置的水平尺寸（这样我们总是可以看到图像）顶部和底部）？

Answer 1

也许最大宽度和最小高度的组合有效？

body {
  margin: 0;
}
section {
  background: #222;
  padding: 1em;
}
img {
  max-width: 100%;
  object-fit: cover;
  border: 1px solid white;
}
img {
  min-height: 50vh; 
}

<section>
  <img src="http://picsum.photos/id/835/800/400">
</section>

运行此代码片段后，使用完整页面链接正确测试响应能力。