Css 具有最高高度的响应图像

我希望，仅使用CSS，将图像拉伸到容器div的最大宽度，保持纵横比，而不使用背景图像。但是，如果图像的高度超过X，则应受到限制。以下情况不会导致图像100%消失。如果我设置它，那么如果高度超过200px，它就会被拉伸

.container {
   width: 200px;    
   position: relative;
}
img {
  position: relative;
  max-width: 100%;
  max-height: 200px;
}

<div class="container"><img src=""></div>

.container{
宽度：200px；
位置：相对位置；
}
img{
位置：相对位置；
最大宽度：100%；
最大高度：200px；
}

---

这里有一把小提琴可以玩：

试着设置高度：

img {
  position: relative;
  max-width: 200px;
  max-height: 50px
}

---

“最大宽度”和“最大高度”的值与容器的尺寸相匹配。

我建议改用这个，更灵活一些。：

img{
最大宽度：100%；
最大高度：100%；
高度：自动；
}

---

有了这个，你可以使用任何你想要的纵横比图像，确保图像将保持响应

我将使用

height:auto除了图像，容器中还有其他内容吗？@sdcr否-但是我不能使用背景图像的原因是它是一个图库，我的拇指需要放在这张较大图像的底部。从上面描述的情况来看，这似乎不现实，如果图像高于200px，则必须稍微剪掉一点（最初或拉伸后），请参见此处的演示-（确保保持纵横比）@sdcr。但做梦的地方也是如此：）如果图像未达到最大高度，则会导致外部div爆炸。检查一下小提琴，我在那里设置了一个巨大的最大高度-图像不应该超过300px，但在这种情况下它会放大div。如果高度是可变的，则设置
宽度：100%
和
最大宽度
？不幸的是，当容器高度小于图像高度时，宽度为100%会导致拉伸。