动态等高响应图像库

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

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

JS小提琴

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元素中，您已经设置了max-height，但是您还需要指定高度。

看看这个https://jsfiddle.net/ya2za6d1/

Answer 4

您可以使用flexbox（无需js）执行以下操作：

.gallary{
  width:100%;
  display: flex;
}
.pic {
  flex: 1;
}
.pic img {
  width: 100%;
}

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

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

我已经建立了一个Codepen http://codepen.io/alexmagill/pen/ggGVwL，并带有一些背景色，以便您可以试用它并了解正在发生的事情。

现在对它的支持非常可靠，但是您可能希望为较旧的浏览器添加备用。

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>