responsive images of varying width with a consistent height

Question

I poured through earlier responses, but cannot seem to find the exact answer.

I am looking to create a container div that holds images of varying widths with a common margin. I'd like to maintain a consistent height as the images resize as the width of the div expands and contracts due to browser size.

I have a jsfiddle, but cannot figure it out: https://jsfiddle.net/s8p4wv8m/

 max-width: 100%;
 height: auto;

Is there something with height I am missing?

I can get the responsive portion, but I'm looking to make the height of all images consistent without affecting the aspect ratio as the browser resizes.

The images will not necessarily be on a grid system either--they will be of varying width.

Thanks so much.

Answer 1

You can add "max-height: 62px;" to all your imgs restricting all images to the height of the shortest image, hence in your fiddle example... is "62px"

Answer 2

Is this what you're looking for?

The images will resize with the window.

Also: The images in your fiddle will always have height-matching problems, some are portrait and some are landscape) unless you're ok with them being cropped.

.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

this will give all the images a width of 100% and scale height, but if the image height is higher then the crop max-height it will not be shown.

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