具有不同宽度但高度一致的响应式图片

Question

我查看了之前的回答，但好像没有找到确切的答案。

我想创建一个容器div，其中包含宽度不同但具有相同边距的图像。当div的宽度因浏览器大小而扩展和收缩时，我希望保持一致的高度，同时图像会重新调整大小。

我有一个jsfiddle，但是无法解决：https://jsfiddle.net/s8p4wv8m/

 max-width: 100%;
 height: auto;

我是否漏掉了高度的某些内容？

我可以实现响应式部分，但我想让所有图片的高度保持一致，同时不影响浏览器调整大小时的纵横比。

这些图片不一定会在网格系统上，它们的宽度也各不相同。

非常感谢。

- user3808123

---

在你的代码中，图片的高度是相互一致的。我有什么遗漏吗？ - Nimrod

将“max-height: 62px;”添加到图像中，限制所有图像的高度为最短图像的高度，在您的fiddle示例中...即为“62px”。 - vicgoyso

这是一个更接近的版本 https://jsfiddle.net/5h54f2co/4/。目前，随着浏览器窗口缩小，图像会自适应大小，保持其宽高比，但它们以不同的速率缩小，并且我无法使 margin-right 生效。理想情况下，它们将以相同的速率缩小，保持其宽高比并保持一致的高度。 - user3808123

Answer 1

您可以添加“max-height: 62px;”到所有的图片中，限制所有图片的高度为最短图片的高度，在您的fiddle示例中...是“62px”

- vicgoyso

---

谢谢--有一个问题--当我更新了这个fiddle时--它们确实会对齐到相同的高度，但是当我将其缩小时，较窄的图像开始比水平图像更多地缩小--有没有办法纠正这个问题？ - user3808123

Answer 2

这是你要找的吗？

图像将随窗口大小调整。

另外：除非你愿意对它们进行裁剪，否则你的fiddle中的图像始终会存在高度匹配问题，因为有些是纵向的，有些是横向的。

.row {
  width: 100%;
}

.fluid-width-fixed-space img {
  margin: 2% auto;
  display: block;
  height: auto;
  border: 1px solid #000;
  max-width: 100%
}

<div class="row">
  <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/550x150">
    <img src="http://placehold.it/150x250">
    <img src="http://placehold.it/340x115">
    <img src="http://placehold.it/800x550">
 </div>

- user7234396

Answer 3

这将使所有图像的宽度为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%
}

- Pizza lord