Example code for implementing image adaptive container with CSS

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

Uh, it seems like the Chinese New Year has just passed.

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 will be centered vertically and horizontally
• When the image width and height are both larger than the container, keep the aspect ratio and fill the container with width or height

   <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.

This effect is much more comfortable

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.

On the 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.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.