Question

我需要显示不同大小的各种图像的缩略图。我想以相同的高度和宽度显示它们的响应div。但问题是图像大小不同。我也试过jquery但是无法达成解决方案。

HTML代码：

<div class="gallery">
  <div class="pic">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
  </div>
  <div class="pic">
    <img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
  </div>
  <div class="pic">
    <img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
  </div>
</div>

CSS：

.gallery{
  max-width:800px;
  overflow:hidden;
  width:100%;
}
.gallery .pic{
  width:33%;
  float:left;
  max-height:200px;
  height:100%;
}
.gallery img{
  height:100%;
  width:100%;
}

Jquery的

var maxHeight = 0;

  $('.gallery .pic').each(function(index){
  if ($(this).height() > maxHeight)
  {
  maxHeight = $(this).height();
  }
  });

  $('.gallery .pic').height(maxHeight);

小提琴： https://jsfiddle.net/1rooxnko/

注意：我正在寻找一个没有固定高度的解决方案 pic class 。

Answer 1

试试这个更新的响应代码可能会帮助你

JSfiddle

HTML：

<div class="gallary">
  <div class="pic">
    <img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
  </div>
  <div class="pic">
    <img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
  </div>
  <div class="pic">
    <img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
  </div>
</div>

CSS：

.gallary{
  width:100%;
  overflow:hidden;
  display:flex;
}

.pic{
  width:33.33%;
}

.gallary img{
  width:100%;
  height:100%;
}

Answer 2

更改此

.gallary .pic{
  width:33%;
  float:left;
  max-height:200px;
  height:100%;
}

到这个

.gallary .pic{
  width:auto;
  float:left;
  max-height:200px;
}

编辑：我发现您的代码有效。但是图像看起来也很扭曲。一个建议我可以给你使用（如果可以的话）背景图像以避免这个问题。

Answer 3

我能找到的问题出在你的.gallery元素中，你已经设置了最大高度，但你也需要指定高度。

查看此https://jsfiddle.net/ya2za6d1/

Answer 4

您可以使用flexbox（不需要js）执行此操作，如下所示：

<div id="people_read" style="width:100%;margin: 0 auto"></div>

我已将.gallary的宽度设置为100％，以便我们可以看到它的响应速度。由于gallery是父元素，因此我将其设置为flex。然后，我为每个.pic元素添加了flex：1，以便它们各自具有相同的宽度。最后，我将每个图像的宽度设置为100％，以便它们缩放以适合每个.pic元素的宽度。

像这样使用flexbox意味着每个子元素（在本例中为.pic元素）自动具有相同的高度。

我已经设置了一个带有一些背景颜色的codepen http://codepen.io/alexmagill/pen/ggGVwL，以便您可以随意使用它并了解正在发生的事情。

支持pretty solid now，但您可能希望为旧浏览器添加后备广告。

Answer 5

请参阅此链接https://github.com/liabru/jquery-match-height

1.应用匹配图像外部div的高度等级。 2.然后将此css应用于图像

<style>
.img{
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
}
</style>

动态等高响应图库

5 个答案: