Question

我倾注了之前的回复，但似乎无法找到确切的答案。

我正在寻找一个容器div，它包含不同宽度的图像和一个共同的边距。我希望保持一致的高度，因为由于浏览器大小，div的宽度会扩展和收缩，因此图像会调整大小。

我有一个jsfiddle，但无法弄明白：https://jsfiddle.net/s8p4wv8m/

 max-width: 100%;
 height: auto;

我遗失了高度的东西吗？

我可以获得响应部分，但我希望在浏览器调整大小时使所有图像的高度保持一致而不影响宽高比。

图像也不一定在网格系统上 - 它们的宽度会有所不同。

非常感谢。

Answer 1

你可以添加“max-height：62px;”你所有的图像限制所有图像到最短图像的高度，因此在你的小提琴示例...是“62px”

Answer 2

这是你要找的吗？

图片会随窗口调整大小。

另外：小提琴中的图像总是会出现高度匹配问题，有些是纵向的，有些是风景图，除非你可以裁剪它们。

.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>

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%
}

响应图像的宽度不一，高度一致

3 个答案: