Setting images in equal height

[Braveheart4]

I have a bunch of images with varying width and height. While I can easily play with the wight in fixed measurements or percentages, I fail to understand how to to set the height of all images to appear equal without loosing aspect-ratio. So far I’ve tried applying styles directly to the img tag, but I’m thinking do I perhaps need some wrapper tag for this?

[SamA74]

Check out my CodePen in this thread:-

Responsive Image Gallery That Maintains Ratio with Faux CSS Cropping?

Been trying things out, I went a bit off topic, I’m using fixed but varied aspects without cropping. Fully responsive (I think) with no media queries.

[Braveheart4]

Thanks. So as I can see the solution is to use an overflow: hidden; to the image wrap.

Ideally I would like the image width to be flexible and the height to be somewhat 80% of the width, kind of like the following:

.img-wrap {
  overflow: hidden;
  width: 50%
}

img {
  width: 100%;
  width: calc(currentWidth - 20%);
}

So the specific case scenario that I need to solve is that the img-wrap is a flexible column. The actual img is wrapped within that flexible area and forces the image to extend full width as much as the wrapper allows. Ideally the image height is 20% less than the image width. Too idealistic?

[PaulOB]

If I understand correctly the method in my example is already mostly doing that.

The image is in a fluid container wrapper who’s width is set to 20%. the padding-top:20% ensures that the image is square but you can change that by reducing the padding-top.

Reducing the padding-top will decrease the height of the element and thus show less of the image. A padding-top of 16% will give an image that is 80% as tall as the width is long. Just play around with the values to suit.

The aspect ratio of the image is maintained at all times but will obviously mean that some parts of the image extend outside the container hence the overflow:hidden.

[dresden_phoenix]

Just so that we are clear. Using CSS, you can set the height of the image, and if no actual height/width has been set on the markup, it will scale accordingly. That is to say if WHAT was important to you was to set ALL images to same height, then just don’t set the width, and use the height property instead. The image will scale proportionally until it’s the specified height at whatever width necessary.

Now, if what you are saying is that you want all images to scale to the same width AND height while keeping their original aspect ratio… then am afraid that would be mathematically impossible ( a math issue, not a CSS issue) unless the pics were all the same aspect ratio to begin with. If the images do not have the same aspect ratio, you’d need to crop them so that they do… ( and of course Paul beat me to a method similar to what I was going to suggest)

[SamA74]

@Braveheart4

So as I can see the solution is to use an overflow: hidden;

That suggests you intend to crop to a set aspect, as in Paul’s example. I took it that you wanted to keep each pictures aspect.

@dresden_phoenix

That is to say if WHAT was important to you was to set ALL images to same height, then just don’t set the width, and use the height property instead.

Simply a case of setting the height in the html

<img src="pic001.jpg" alt="photo" height="200">

If all image are set up like that, they will all be 200px high.
But if you want to crop to a fixed aspect, use the methods mentioned in the other thread.