CSS perfectly solves the problem of front-end image deformation

I saw an article in Toutiao IT School that CSS perfectly solves the problem of front-end image deformation, so I recorded it and shared it:

1. Make the image's width or height equal to the container's width or height, cut off the excess, and then center the image:

<style type="text/css">
div{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 2px solid red;
    position: relative;
}
img{
    width: 100%;
    position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
}
</style>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

Effect picture:

If the width of the image is limited and the height is greater than or equal to the height of the container, it will fill the entire container. However, if the image height is less than the container height, blank space will appear. The same applies to fixed height. This method is the simplest and most practical, and it will be more perfect when combined with background cutting.

2. Make sure the image is always displayed in the container and centered. This method does not crop the image and can be said to be an upgraded version of the above.

<style type="text/css">
div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    position: relative;
}
img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); 
}
</style>
<div>
    <img src="1.png">
</div>
<br>
<div>
    <img src="1.jpg">
</div>

The effect diagram is as follows:

It can be seen that no matter the width exceeds the container, the height exceeds the container, or the width and height do not exceed the container, they can all be displayed in the center of the container without being cropped.

3. Turn the picture into the background. By changing the background size, you can arbitrarily change the effect of the picture displayed in the container. The operation is the most convenient:

<style type="text/css">
div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
</style>
<div style="background-image: url(1.jpg);"></div>

The effect diagram is as follows:

By changing the background-size in the above picture, we can see that both method 1 and method 2 can be easily implemented. Moreover, the last cover effect is the most ideal, that is, it is displayed in the center, fills the entire container and does not deform. If you don't consider SEO, this method is still very easy to use. However, if you are an information site, photo exhibition, etc., do not use this method, otherwise your pictures will be difficult to be included in the search engine.

4. It would be great if there is a method that can achieve the effect of the third method while taking SEO into consideration. Here we would like to introduce: object-fit and object-position. You can understand it this way, object-position is equivalent to background-position, and its default value is 50% 50%, which is centered, so it is generally not written. Once object-fit is added, it is centered by default. Object-fit is equivalent to background-size, which is the image filling method (not the image size here).

<style type="text/css">
div{
    width: 200px;
    height: 200px;
    border: 2px solid red;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
<div>
    <img src="1.jpg">
</div>

The effect diagram is as follows:

From the above picture, we can see that the result is almost exactly the same as the effect set by the background method. It can be said that this is a replica of the background method, and it can also avoid the disadvantage that the background image will not be included in the search engine. If you don't consider IE compatibility, why not use this method? Mom no longer has to worry about editors uploading random pictures!

Note: The image must be set with width and height, otherwise object-fit will be invalid. Just set the image to the same width and height as the container. The container does not need to be set to overflow and hide, object-fit will automatically hide the parts that exceed the width and height of the image.

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.