Image height and aspect ratio for equal columns

Question

I have three images next one the other creating a 3 column layout of images. I need this images to have a specific height so they're cropped to this height no matter how the image is.

The point is that I need those images to keep an aspect ratio depending on how you resize your window.

If I declare an specific height (i.e. 700px or 70vh), the aspect is so much different if, let's say, the window is 1900px wide or 700px.

Is there a way I can "lock" the height dimensions of the images so they keep their aspect no matter how's your screen and considering every image might not have same height as the other?

Thanks in advance

Answer 1

There are a few ways to do this,

• use background images instead of putting the image into the div - this is very flexible.
• object-fit works on the image itself but you have to set the dimensions on the image, not just the container. There is more support now for this than there was but as usual IE is a problem.

For both of these you want to use cover so that the image is made big enough to fill the container but will crop off the parts that don't fit.

The code to do both of these ways is next. See the comments for how it works:

Background Images

.column {
  /* this is the important bit */
  background-size: cover;
  /* this is where the image is positioned. 
  This puts it horizontally centered and vertically at the top 
  You can use left, right, bottom or values in px or %  */
  background-position: center top;
  
  /* this is not important. It is to make columns so you can see it work*/
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;

}

/* put the images as background images.*/
.pic1 { background-image: url("https://via.placeholder.com/300x700"); }
.pic2 { background-image: url("https://via.placeholder.com/250x400"); }
.pic3 { background-image: url("https://via.placeholder.com/300x300"); }

<div class="column pic1"></div>
<div class="column pic2"></div>
<div class="column pic3"></div>

Object Fit

/* this is the important bit */
img {
  object-fit: cover;
  /* you must set the sizes here or it won't work. e.g. */
  width: 100%;
  height: 100%;
}

/* this is not important. It is to make columns so you can see it work */
.column {
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;
}

<div class="column"><img src="https://via.placeholder.com/300x700"></div>
<div class="column"><img src="https://via.placeholder.com/250x400"></div>
<div class="column"><img src="https://via.placeholder.com/300x300"></div>

Another example with real photos so you can see that they keep their aspect ratio and do not stretch when you resize the window. The real image size is the dimensions in the url:

• image 1 is 300px * 700px
• image 2 is 250px * 400px
• image 3 is 300px * 300px

/* this is the important bit */
img {
  object-fit: cover;
  /* you must set the sizes here or it won't work. e.g. */
  width: 100%;
  height: 100%;
}


/* this is not important. It is to make columns so you can see it work */
.column {
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;
}

<div class="column"><img src="https://source.unsplash.com/MJBh9NBoD20/300x700"></div>
<div class="column"><img src="https://source.unsplash.com/afuOsuzyx24/250x400"></div>
<div class="column"><img src="h
ttps://source.unsplash.com/dOmKEVCg94s/300x300"></div>

Answer 2

You can set min/max width and height atributtes:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

Or you can use object-fit: cover; CSS property. Notice that this will preserve the ratio, but may "crop" the image. For more information, see this question. It will be more specific.

Answer 3

Set the width of the images to a percentage of it's parent container. For example:

body {
   height: 100vh;
   display: flex;
   justify-content: space-evenly;
}

img {
   width: 50%;
}

This will ensure that the images will always occupy 50 percent of the container that it's in, which in this case is the body.

Answer 4

You can use object-fit.

.container{
  width: 300px; /* arbitrary width, use yours */
}

.container > div{
  width: 33.3%; /* 1/3 = 33.3 For 3 elements for each row */
  height: 100px; /* arbitrary height, use yours */
  box-sizing: border-box;
  padding: 10px; /* space between images */
  float: left;
  overflow: hidden; /* crop image if they are not an exact square */
}
.container > div > img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class='container'>
  <div><img src='https://picsum.photos/200/300' alt='first sample image'/></div>
  <div><img src='https://picsum.photos/300/400' alt='second sample image'/></div>
  <div><img src='https://picsum.photos/400/400' alt='third sample image'/></div>
</div>

You can use background-image too, but then the source of your images should be declare in CSS. Prefer object-fit when you have multiple images, like in a gallery.