Make Two Images Same Height Without Hardcoding?

Here I have two images. I have the widths of these two img elements exactly how I want it. The gutter between these two elements and their container is exactly how I want it as wel

Solution 1:

So the problem is that if you set the width and height the same on two differently sized images, at least one of them will be distorted.

You could quite easily fix this, as long as the images are relatively similar in size. The idea is, you surround the image with a div and give the div the height and width instead of the image. Then give it the CSS overflow: hidden; and it will crop off the extra bit of the image. You may also need to give it display: inline-block; to get the div's next to each other.

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

<div><imgsrc="http://via.placeholder.com/200x200"></div><div><imgsrc="http://via.placeholder.com/200x240"></div>

Or if you want the image vertically centered:

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  overflow: hidden;
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div><imgsrc="http://via.placeholder.com/200x200"></div><div><imgsrc="http://via.placeholder.com/200x240"></div>

Solution 2:

I recommend using aspect ratios. Format your images to be the same aspect ratio at the minimum before uploading. The other option would be converting to BG images if you can't pre-format.

.container {
    padding-top: 100%; /* 1:1 Aspect Ratio */
    //padding-top: 75%; /* 4:3 Aspect Ratio */
    //padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Solution 3:

I think another approach would be setting image height and use actual image content as background image with background-size:contain; this way your image will not be distorted and will always fill the size.

<imgsrc="blank.gif"style="background-image:url(myImage.jpg);background-repeat:no-repeat;background-position:center center; background-size:contain;height:300px;">

Solution 4:

If I were you, I would utilize a CSS method of wrapping your images in a container that has overflow set to hidden which will hide the hanging off pixels.

If you feel people will miss out on part of the image, you could use a css animation like I did below when you hover over it. I use translate3d because it utilizes GPU acceleration in browsers.

main {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: 500px;
}

.img-wrap {
overflow:hidden;
height: 15rem;
width: 15rem;
}

.img-wrap>img {
max-width: 500px;
}

.img-wrap:hover>img {
animation: pan 5s;
}

@keyframes pan {
  from {transform:translate3d(0,0,0);}
  to {transform:translate3d(-100px,0,0);}
}

<main><divclass="img-wrap"><imgsrc="http://lorempixel.com/city/500/600"></div><divclass="img-wrap"><imgsrc="http://lorempixel.com/people/800/700"></div></main>

Solution 5:

The easiest way to achieve this would be to set the images as the background of your divs. This will not distort the images as setting the height and width on an img element would. You can then define whether to center it or not.

.img {
  width: 200px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

<divclass="img"style="background-image: url('https://images.pexels.com/photos/23764/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');"></div><divclass="img"style="background-image: url('https://images.pexels.com/photos/23388/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');"></div>