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

After applying vertical-align: top, I noticed that both of these images automatically determine their own height based on the aspect ratio of the source image. As you can see this means the images end up having the same widths (which I defined explicitly) but different heights by a matter of a dozen pixels or so:

I was wondering if there is a way to give both of these images the same height without switching them to be background-image's. Also, if this image feed is 'dynamic' how could I explicitly define the height while not knowing the aspect ratio of the image in question?

回答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>
  <img src="http://via.placeholder.com/200x200">
</div>
<div>
  <img src="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>
  <img src="http://via.placeholder.com/200x200">
</div>
<div>
  <img src="http://via.placeholder.com/200x240">
</div>

回答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 */
}

回答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.

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

回答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>
<div class="img-wrap">
<img src="http://lorempixel.com/city/500/600">
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/people/800/700">
</div>
</main>

回答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;
}

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

回答6:

I have always had this problem, the only solution I found that solves this problem effectively is

background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;

and have the image displayed via backend like php with inline style

<div class="image" style="background-image: url('pathToImage');"></div>

来源：https://stackoverflow.com/questions/45637702/make-two-images-same-height-without-hardcoding

标签

javascript

html

css

image

height