When the img image is too large, setting the width and height of the image will distort the image display, and the object-fit attribute can solve this problem very well:
<div>
<img
src="https://img0.baidu.com/it/u=2781068817,2482511563&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=449"/>
</div> img{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px 10px 0;
object-fit: cover;
}object-fit: fill|contain|cover|scale-down|none|initial|inherit;
| value | describe |
|---|---|
| fill | By default, the original ratio is not guaranteed, and the content is stretched 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 cut. |
| none | Keep the length and width of the original element content, which means the content will not be reset. |
| scale-down | Keep the original size ratio. The size of the content is the same as either none or contain, whichever of the two results in a smaller object size. |
| initial | Set as default, about initial |
| you inherit | Inherit properties from this element's parent element. about inherit |
The styles are as follows:
