Question 348295 in Html Question posted in
Some basic documentation can be found here.

Html – Equal height figures and not cropped

I would like to display a row of 2-5 figures containing an image and a caption.
The figures must have the same height and the aspect ratio of the images must be maintained.
HTML would look something like this:

<div class="container">
  <figure style="--w:100; --h:100;">
    <img src="https://placehold.co/100x100/f08/fff" style="--w:100; --h:100;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:200; --h:40;">
    <img src="https://placehold.co/200x40/0f8/fff" style="--w:200; --h:40;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:150; --h:200;">
    <img src="https://placehold.co/150x200/8f0/fff" style="--w:150; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
  <figure style="--w:250; --h:200;">
    <img src="https://placehold.co/250x200/f80/fff" style="--w:250; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
</div>

codepen

I’ve found something similar here, but it doesn’t work right with the figure element, unless I use object fit cover on the img tag.

Display images side-by-side with equal height

Tags:

2

Answers


  1. 0

    Here is a better approach to perfectly fit all the images inside the figure container.
    You can use : max-height and min-height properties to limit the image dimension. Then object-fit: cover will maintain the image view.

    .container{
  display: flex;
/*   border: 1px solid black;  */
}
figure img{
  min-height: 300px;
  max-height: 300px;
  min-width: 300px;
  max-width: 300px;
  object-fit: cover;
}
figure{
  text-align: center;
}
    <div class="container">
  <figure >
    <img src="https://placehold.co/100x100/f08/fff" style="--w:100; --h:100;">
    <figcaption>caption</figcaption>
  </figure>
  <figure >
    <img src="https://placehold.co/200x40/0f8/fff" style="--w:200; --h:40;">
    <figcaption>caption</figcaption>
  </figure>
  <figure >
    <img src="https://placehold.co/150x200/8f0/fff" style="--w:150; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.co/250x200/f80/fff" style="--w:250; --h:200;">
    <figcaption>caption</figcaption>
  </figure>
</div>
    Login or Signup to reply.
  2. 0

    Here’s another approach that I tried

    • I explicitly targeted the second figure child and set custom properties
    • The second Image is now scaled downed to fit with the other images.

    As the second image is a bit wider in dimensions, so its getting stretched out.

    Hope this helps..

    .container{
  display: flex;
  justify-content: center;
}
figure img{
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
figure:nth-child(2) img{
  width: 100%;
  object-fit: contain;
  transform: scale(1,3.3)
}
figure{
  display: inline-block;
  width: 300px;
  text-align: center;
}
    <div class="container">
  <figure >
    <img src="https://placehold.co/100x100/f08/fff">
    <figcaption>caption</figcaption>
  </figure>
  <figure >
    <img src="https://placehold.co/200x40/0f8/fff">
    <figcaption>caption</figcaption>
  </figure>
  <figure >
    <img src="https://placehold.co/150x200/8f0/fff">
    <figcaption>caption</figcaption>
  </figure>
  <figure>
    <img src="https://placehold.co/250x200/f80/fff">
    <figcaption>caption</figcaption>
  </figure>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search