How Can I Proportionally Fill a Div with an Image Using Flexbox?

Filling a Div with an Image Proportionally

In the quest to create responsive web designs, a common challenge arises in filling a div element with an image while maintaining its aspect ratio. When the image varies in orientation between portrait and landscape, it becomes difficult to resize it seamlessly while respecting its original proportions.

To address this, CSS offers a solution using flexbox. By utilizing CSS flexbox, you can achieve the desired outcome with a few lines of code.

Flexbox to the Rescue

Flexbox is a CSS layout module that provides flexible and efficient ways to distribute and manage space within a container element. In this case, it can be used to ensure that the image always fills the container div, regardless of its aspect ratio.

Implementation

Consider the following HTML markup:

<div class="container">
    <img src="/static/imghwm/default1.png" data-src="some-image.jpg" class="lazy" alt="Could be portrait or landscape">
</div>

To achieve the desired behavior, apply the following CSS styles to the elements:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

Explanation

• .container:

  • display: flex: Enables flexbox on the container div.
  • justify-content: center; align-items: center;: Centers the image within the div.
  • overflow: hidden: Hides any part of the image that overflows the container.

• .container img:

  • flex-shrink: 0;: Prevents the image from shrinking when the container resizes.
  • min-width: 100%; min-height: 100%;: Ensures that the image always expands to at least the size of the container.

Result

With these CSS styles implemented, the image will automatically fill the container div while maintaining its aspect ratio. If the image is portrait, its width will be 100%, and its height will be adjusted proportionally. Similarly, if the image is landscape, its height will be 100%, and its width will adjust accordingly.

The above is the detailed content of How Can I Proportionally Fill a Div with an Image Using Flexbox?. For more information, please follow other related articles on the PHP Chinese website!