Several ways to implement image adaptive container with CSS (summary)

There is often a scenario where the image needs to adapt to the size of the container.

1. The img tag method

We can immediately think of setting width and height to 100%. Let’s take a look at the effect.

<div class='div1'>
    <img src="./peiqi.png" alt="">
</div>

.div1 {
    width:500px;
    height:400px;
    border:1px solid black;
}
.div1 img {
    /*
    width: 100%;
    height:100%;
    */
}

This is a normal page (if the image is larger than the container, the image will exceed the container)

.div1 {
    width:500px;
    height:400px;
    border:1px solid black;
}
.div1 img {
    width: 100%;
    height:100%;
}

This is 100% Peggy

Although it meets the requirements of adaptation, the image is distorted as shown in the figure. If the image is smaller than the container and you force it to adapt, the image will be distorted. If it is a single image (logo, placeholder image, etc.), you can develop it according to the design draft. However, we often encounter irregular images obtained by the interface. Generally, if the image is smaller than the container, it will be centered horizontally and vertically.
Let’s sort out the tasks:

When the image width and height are smaller than the container, it is centered vertically and horizontally. When the image width and height are larger than the container, the aspect ratio is maintained and the width or height is filled with the container.

<div class='div1'>
        <img src="./peiqi.png" alt="">
    </div>
    <div class='div1'>
        <img src="./peiqi2.png" alt="">
    </div>
    <div class='div1'>
        <img src="./peiqi4.jpeg" alt="">
    </div>

.div1 {
        width:500px;
        height:400px;
        border:1px solid black;
        display: table-cell;
        vertical-align: middle;
    }
    .div1 img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }

The max-height property prevents the height property from being set to a value greater than max-height.
The max-height attribute is used to set the maximum height of a given element. If the height set by the height attribute is greater than the height set by this attribute, the height attribute will become invalid.

2. Background image method

.div {
        background-size: contain;
 }

background-size: contain; expands the image to its maximum size so that its width and height completely fits the content area. By using the CSS background-size: contain; property, we can further optimize the situation where the width and height of the image are smaller than the container.

Above code:

  div {
        height: 400px;
        width: 500px;
        border: 1px solid black;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .div1 {
        background-image: url(./peiqi1.png);
    }
    .div2 {
        background-image: url(./peiqi2.png);
    }
    .div3 {
        background-image: url(./peiqi4.jpeg);
    }

<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>

Of course, in the end it all depends on demand and what the product requires.

This concludes this article about several ways to implement image adaptive containers with CSS (summary). For more relevant CSS image adaptive container content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!