htmlcssobject-fit

Limit height of image to a fixed aspect ratio and use object-fit when it exceeds it

I have an image with some text in a responsive column. The image is chosen by users so I don't know it's aspect ratio beforehand. I want to limit the height of the image to an aspect ratio of 1 / 1. This means :

Here is a code example :

body {
  display: flex;
}
.container {
  width: 50%;
  padding: 0 5%;
}
.image-wrap img {
  width: 100%;
}
<div class="container">
  <h3>Landscape image</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x200" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>
<div class="container">
  <h3>portrait image</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x600" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>

The behaviour I need for images exceeding the 1/1 apsect ratio is :

body {
  display: flex;
}

.container {
  width: 50%;
  padding: 0 5%;
}

.image-wrap {
  aspect-ratio: 1/1;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
<div class="container">
  <h3>portrait image</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x600" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>

Solution

  • This is a use case for the new container query units. Here you can use cqw as max-height

    body {
  display: flex;
}
.container {
  width: 50%;
  padding: 0 5%;
  container-type: inline-size; /* we make this a container */
}
.image-wrap {

}

.image-wrap img {
  width: 100%;
  max-height: 100cqw; /* don't exceed 100% width of the container */
  object-fit: cover;
}
    <div class="container">
  <h3>Landscape image</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x200" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>
<div class="container">
  <h3>portrait image</h3>
  <div class="image-wrap">
    <img src="https://placehold.co/400x600" />
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere elit sit amet ullamcorper feugiat. Etiam vitae venenatis est, tincidunt elementum nibh. Nunc volutpat maximus suscipit. Sed scelerisque neque in lorem pulvinar, vel mattis enim tristique. Morbi in sagittis justo. Donec in dui eget sem dapibus ultricies. Vestibulum vel nunc eget nisl hendrerit placerat a sed tellus. Vivamus convallis nec felis semper rutrum. Curabitur efficitur pellentesque nisi. Integer ut diam in risus condimentum sodales. Aenean bibendum congue metus, ut blandit sapien hendrerit eget. Proin tristique facilisis erat non scelerisque. Duis ornare, nunc ac faucibus mollis, nisi felis dapibus justo, ut maximus dui magna vel quam. Nam molestie luctus lectus, et viverra ante dapibus vel.</p>
</div>