CODEWITHSUNDEEP
htmlcssimageflexboxalignment
Krastanov
Krastanov

Reputation: 6549

Fit multiple images of different sizes in a row of fixed width and adjust height

Consider 3 (or more) images, all of different sizes and aspect ratios in a div of fixed width (for instance width:100%):

<div class="image-row">
   <img src="1.png">
   <img src="2.png">
   <img src="3.png">
</div>

How can you force all the images to have the same height and their total width to fill out the width of the container (i.e. how do you make a neat row of images)?

I have tried various combinations of flex or inline-block or nowrap to work properly with height:100% or object-fit, but nothing seems to work. I either loose the aspect ratio, cut parts of the image, or do not have equal heights.

In "English pseudocode" the procedure sounds straightforward - rescale each separately to a unit height, then rescale as a group to a given width, all while keeping aspect ratios. Is there a particular step that CSS is not capable of?

Upvotes: 1

Views: 1829

Answers (1)

Andrew Halpern
Andrew Halpern

Reputation: 514

I think setting the images as background images might help. That way you can have images of different sizes filling in the same width/height div using the background-size:cover. I don't believe it's possible to have all images be the same height without parts cutting off if the aspect ratios are different for each image. You could also try adjusting the background-position of each image to at least center your image in the div or try editing/cropping the photos before to have the same aspect ratio. Otherwise, you'll have to compromise.

img {
  width: 33%;
  height: 150px;
}

.content {
  width: 33%;
  display:inline-block;
  height:150px;
}

#left {
  background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg");
  background-size:cover;
 
}

#center {
  background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg");
  background-size:cover;
}

#right {
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg");
  background-size:cover;
}
<div class="image-row">
  <div id = "left" class="content">
  </div>
  <div id = "center" class="content"> 
  </div>
  <div id = "right" class="content">
  </div>
</div>

Upvotes: 1

Related Questions