Relative div with absolute images

[TechnoBear]

@SamA74

But not on the image, not the image container.

Umm … on which, then?

[PaulOB]

@SamA74

It doesn’t, the height: auto on the image maintains the image aspect.

No, I think you are misunderstanding the technique a little here

The aspect ratio is maintained wholly by the padding technique so the image needs to be width:100% and height:100%. The image ratio will be correct as long as you have matched it with the padding that is being used. (To be fair if you have correctly managed the aspect ratios then height:auto would also work but in essence is not part of the technique.)

If all the image aspect ratios are not all the same then of course the image will be stretched or squashed which is what I have been mentioning a few times now.

If the aspect ratio for the images are not all the same and you set height:auto on the image the image will either be smaller or taller than the padding box you are using and thus leave a gap or overflow the container.

@SamA74

To avoid that, set a max-width. Not on the image, but the image container.

Isn’t that what I just said.

@PaulOB

If you want to contain the image size to 1140px max-width then you do that via a container of the image and not the image itself.

[SamA74]

@PaulOB

The aspect ratio is maintained wholly by the padding technique so the image needs to be width:100% and height:100%. The image ratio will be correct as long as you have matched it with the padding that is being used. (To be fair if you have correctly managed the aspect ratios then height:auto would also work but in essence is not part of the technique.)

If the container aspect is set correctly, either should work the same. In my example I used height: auto because it does give a little leeway for the image aspects varying from the container without distortion.

@PaulOB

Isn’t that what I just said.

Yes, just reiterating that as the OP was asking about the image getting larger than its native size.

[littlebirdy]

As an alternative you can try BX Slider or Owl Carousel. They have options like auto height and have various features like finger touch swipe and mobile responsiveness.