Css: How can I set image size relative to parent height?

html

responsive-design

css-grid

viewport-units

byNikita Barsukov·Nov 13, 2024

Use the CSS property height with percentage (%) to define the image's size relative to its parent element’s height. In this approach, the image height dynamically adapts to changes in the parent's height.

.parent {
  height: 300px; /* Parent height: Not the boss of me */
}

.child img {
  height: 50%; /* Child image height: Half as tall, twice as cool */
}

In this setup, the child's image height is always equivalent to half of its parent's height, allowing for responsive adjustment.

Aspect ratio: Keep it together

Maintaining the aspect ratio of an image requires the use of the object-fit property. This ensures the image covers the available space within its parent container without stretching the image or distorting its dimensions.

.parent img {
  height: 100%; /* ♥️ Resize without the stress ♥️  */
  width: auto;
  object-fit: cover; /* 🎩 Magic trick: Cover, don't smother 🎩*/
}

Overflow protocol: Hide and contain

You want to ensure that the image fills its parent container without spilling over. This is where overflow: hidden comes to the rescue, neatly hiding any overflow.

.parent {
  overflow: hidden; /* 🙈 Peekaboo, I don't see you overflow 🙈 */
}

Flexbox: Stretch those CSS muscles

Flexbox allows for a quick and easy way to create designs wherein image adjusts based on flex properties:

.flexbox-container {
display: flex; /* Chameleon container, it flexes and fits 🦎 */
 align-items: center; /* Align items to center, like stars of the show 👯‍♀️ */
 justify-content: center; /* Writing CSS is like yoga, stretch & center 🧘‍♀️ */
}

.flexbox-container img {
 max-width: 100%; /* Mom says it's my turn to use the width */
 max-height: 100%; /* Living on the edge, but not going over it */
}

The image maintains its aspect ratio while resizing according to the parent, courtesy of our flexible friend, flexbox.

Absolute positioning: Get in position

Absolute positioning combined with CSS transform can be employed to center an image within a parent of a fixed dimension.

.parent-div {
 position: relative; /* Reliable parent - always knows its relative position 😌 */
 height: 300px; /* Parent height, not a high bar ➖ */
}

.child-image {
 position: absolute; /* Child image, free-spirit! 🕊️ */
 top: 50%; /* Not too up, not too down, just in the middle 🧘‍♂️ */
 left: 50%; /* Left or right, why not center? 🤷‍♀️ */
 transform: translate(-50%, -50%); /* Let's dance the transform salsa 💃 */
 max-height: 100%; /* 100% ambition, no stepping out of line 🎯 */
}

By using this approach, we ensure that the image is not only centered but also respects the boundaries set by the parent's height.

Too tall, you say? No problem!

Handling taller images which do not naturally fit within their parent isn't impossible. Simply use max-height and max-width properties:

.child img {
 height: auto;
 max-height: 100%; /* Stay in bounds, Kid 🚸 */
 width: auto;
}

Viewport units: the scenic route

A very potent and useful unit type in CSS for responsive design is the viewport unit, the vh unit, to be precise. It sets the height relative to the viewport's actual height in a fluid manner.

.image {
  height: 50vh; /* Landscape or portrait, I fit right in 🖼️ */
}

CSS Grid: Here's a grid for your picture

To achieve granular control over both rows and columns, the CSS Grid Layout is king. It provides a powerful layout system that works especially well with images.

.grid-container {
  display: grid; /* 🎶 Because the grid is on, nah nah nah 🎶 */
  grid-template-columns: repeat(3, 1fr);
}

.grid-item img {
  width: 100%; /* ⚡️ Lightning width - Faster than your scrollbar! ⚡️ */
  height: auto;
}