Let img show the same picture as the background

How to make the same picture as the background display it?

It should be usedobject-fit属性

MDN Address: https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit的取值:

the Fill (not maintain the aspect ratio to scale the image, the picture fully meet)
Contain (maintain the aspect ratio to scale the image, the picture of the long side can be fully displayed)
Cover (maintain the aspect ratio to scale the image, only assure pictures short side can be fully displayed )
none (maintaining constant picture width and height)
Scale-Down (when actual image width and height smaller than the image width and height is provided, display with none consistent; otherwise, display and contain the same)

 

Note: img pictures need to set the width and height, and aspect ratio as the above properties are set to take effect than the food, and generally set the width and height to 100% can be.

Compatibility note that some browsers do not support low version

Guess you like

Origin www.cnblogs.com/fqh123/p/11993691.html