动态等高响应图像库

Question

I need to display thumbnails of various images of different sizes. I wanna display them in equal height and width of responsive divs. But the problem is the images are of different sizes. I have also tried jquery but couldn't reach to a solution.

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

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

Fiddle: https://jsfiddle.net/1rooxnko/

Note: I am looking for a solution that is without fixed height to pic class .

Answer 1

try this updated responsive code may be it can help you

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

Change this

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

to this

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

EDIT: I've seen that your code works. But also that images looks distorted. One suggest that I can give you is to use (if you can) background images to avoid this problem.

Answer 3

The problem I could find was in your .gallery element, you've set the max-height, but you also need to specify height too.

have a look at this https://jsfiddle.net/ya2za6d1/

Answer 4

You can do this with flexbox (no js required) as follows:

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

I've set .gallary's width to 100% so that we can see it's responsive. As gallery is the parent element I've set this to flex. I've then added flex: 1 to each .pic element so that they are each the same width. Finally, I've set the width of each image to 100% so that they scale to fit the width of each .pic element.

Using flexbox like this means that each child element (in this case the .pic elements) is automatically the same height.

I've set up a codepen http://codepen.io/alexmagill/pen/ggGVwL with some background colours in place so that you can play around with it and get a sense of what is happening.

Support for it is pretty solid now but you might want to add in fallbacks for older browsers.

Answer 5

Please refer this link https://github.com/liabru/jquery-match-height

1.Apply match height class for the outer div of the image. 2.Then apply this css for the image

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