Responsive images with constant aspect ratio

Adapting image width responsively is quite straightforward, but turning a width change into a corresponding height change turns out to be a bit more challenging. In the process of trying to do just that I found a CSS-Tricks article (and another on W3Schools) that suggest the following solution:

• Wrap your content - in this case an image - in a container
• Set the height of that container as a function of its width by using the fact that padding percentages (even top and bottom) are relative to widths
• Absolute position the content inside the container and optionally apply some object- fitting and positioning magic

This is how the images in the grid below are laid out. Try fiddling around with the width of this page to see the result. The images shrink and grow, but the aspect ratio remains always very close to 3:2.

Pisa cathedral

Lorenzo Nucci

In faucibus eros a vulputate venenatis. Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Nunc suscipit aliquet mattis.

A Moon

Sigg Sebastian

In faucibus eros a vulputate venenatis. Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam.

Blinded by money

Ricardo Aguilera

In faucibus eros a vulputate venenatis.Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam. Nunc suscipit aliquet mattis.

Psychedelics

Thomas Kinto

Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam. Nunc suscipit aliquet mattis.

Here"s the CSS magic that reins those images in. It seems a bit hacky and I"m still not very happy about absolute positioning my elements, but it seems to work quite fine.

        
          .img-wrapper {
            position: relative;
            width: 100%;
            padding-top: 66.667%;
            overflow: hidden;
          }
          .img-wrapper > img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
          }
        
      

And this is how it looks with no fixin":

Pisa cathedral

Lorenzo Nucci

In faucibus eros a vulputate venenatis. Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Nunc suscipit aliquet mattis.

A Moon

Sigg Sebastian

In faucibus eros a vulputate venenatis. Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam.

Blinded by money

Ricardo Aguilera

In faucibus eros a vulputate venenatis.Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam. Nunc suscipit aliquet mattis.

Psychedelics

Thomas Kinto

Cras mi neque, gravida at lorem eget, dictum fringilla mauris. Ut blandit mauris id ante porta hendrerit. Fusce pellentesque pharetra tincidunt. Quisque vitae sagittis ipsum. Integer in enim eros. Suspendisse nisl quam, dignissim eget dui non, laoreet imperdiet quam. Nunc suscipit aliquet mattis.

As always, feedback appreciated. Did I miss something, did you love this solution? Add a comment on the Pen or find me on Twitter.