Css 不同宽度、高度一致的响应图像

我仔细阅读了之前的回答，但似乎找不到确切的答案

我希望创建一个容器div，它可以保存具有公共边距的不同宽度的图像。我希望在图像调整时保持一致的高度，因为div的宽度因浏览器大小而扩展和收缩

我有一个JSFIDLE，但无法理解：

有没有我缺少的高度

我可以得到响应部分，但我希望在不影响纵横比的情况下使所有图像的高度保持一致

图像也不一定在网格系统上——它们的宽度是不同的

---

非常感谢。

您可以将“最大高度：62px；”添加到所有img中，将所有图像限制为最短图像的高度，因此在您的小提琴示例中。。。“62px”是你要找的吗

图像将随窗口调整大小。

另外：小提琴中的图像总是有高度匹配问题，有些是纵向的，有些是横向的，除非你同意裁剪

.row{
宽度：100%；
}
.流体宽度固定空间img{
利润率：2%自动；
显示：块；
高度：自动；
边框：1px实心#000；
最大宽度：100%
}

---

这将为所有图像提供100%的宽度和缩放高度，但如果图像高度高于最大裁剪高度，则不会显示

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


.crop{
    position: relative;
    overflow: hidden;
    max-height: 200px;
    display: block;
    overflow: hidden;
}

.crop img{
    width:100%
}

.作物{
位置：相对位置；
溢出：隐藏；
最大高度：200px；
显示：块；
溢出：隐藏；
}
.作物img{
宽度：100%
}

在小提琴中，图像的高度彼此一致。我遗漏了什么吗？在图像中添加“最大高度：62px；”，将所有图像限制为最短图像的高度，因此在您的小提琴示例中。。。是“62px”。这是一个更接近的版本。现在，随着浏览器窗口尺寸的减小，图像响应迅速，它们保持着纵横比，但它们以不同的速率减小，我无法让边距正常工作。理想情况下，它们都会以相同的速度缩小尺寸，保持纵横比并保持一致的高度。谢谢——一个问题——当我更新小提琴时——它们会捕捉到相同的高度，但当我缩小它时，越窄的图像开始比水平图像缩小得更多——有没有办法纠正这个问题？

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


.crop{
    position: relative;
    overflow: hidden;
    max-height: 200px;
    display: block;
    overflow: hidden;
}

.crop img{
    width:100%
}