How Can I Scale Images to Fit Bounding Boxes Using Only CSS?

Scaling Images to Fit Bounding Boxes Using CSS Only

Achieving a dynamic image scaling effect that preserves aspect ratio can be challenging. However, using CSS3 techniques, we can solve this problem and scale images to fit a bounding box.

The conventional approach with CSS is to use the max-width and max-height properties, which scale images down to fit within a specified container. However, when scaling up images, these properties fall short.

CSS3 Solution

CSS3 offers the solution through the background-image and background-size properties. By setting an image as the background of a container and using background-size: contain, we can force the image to scale until a dimension reaches the full width or height of the bounding box.

HTML

<code class="html"><div class='bounding-box'></div></code>

CSS

<code class="css">.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}</code>

Compatibility and Options

This solution is supported by the latest browsers. CanIUse provides a detailed compatibility table.

To center the image within the bounding box, a variation of the CSS can be used:

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

The above is the detailed content of How Can I Scale Images to Fit Bounding Boxes Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!