CSS - <img> image clipping object-fit attribute, specifies how the image should "fit" the height and width of the container (detailed sample code)

foreword

Generally speaking, you will set a width and height for <img>the tag , and then the image will be "stretched" to full according to this width and height.

If the specified width and height are not suitable for the width and height of the image, there will be a problem of stretching and deformation. At this time, you need to adjust the object-fit attribute to crop:

sample code

object-fit property documentation: https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

attribute value	illustrate
fill	The default value does not guarantee to maintain the original ratio, and the content stretches to fill the entire content container.
contain	Keep the original size ratio. The content is scaled.
cover	Keep the original size ratio. However, some content may be cropped.
none	Keep the length and width of the original element content, that is to say, the content will not be reset.
scale-down	Keep the original size ratio, the size of the content is the same as one of none or contain, depending on which one of them gets the smaller size of the object.

<img src="xx" class="image">

.image {
    
    
	/* 图片容器宽高 */
    width: 255px;
    height: 120px;
	/* 指定裁剪模式(详见上方) */
    object-fit: cover;
}