How to Make Images Proportionally Fill Divs in CSS?

How to Display Proportional Images in Filled Divs

In CSS, achieving a perfect fit for images within a div can be challenging, especially if you want to preserve their aspect ratio. Here's a concise solution to fill a div with an image while maintaining proportionality:

Utilizing Object Fitting

Most modern browsers support the object-fit property, allowing you to control how images are displayed within their containers. For this scenario, you can use the following CSS:

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contain ensures that the image fills the container while maintaining its original proportions. It also prevents the image from being cropped or distorted.

Using Flexbox

An alternative approach is to use Flexbox. This technique allows you to center and flexibly size the image within the div, achieving the desired effect:

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

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

In this scenario, the image will always fill the div's available height or width while maintaining its aspect ratio.

Implementation Example

To implement this solution, simply apply the appropriate CSS to the div containing the image:

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="How to Make Images Proportionally Fill Divs in CSS?" >
</div>

Note: Ensure that the overflow property is set to hidden on the div to prevent the image from overflowing outside its bounds.

The above is the detailed content of How to Make Images Proportionally Fill Divs in CSS?. For more information, please follow other related articles on the PHP Chinese website!