Img element
<img src="./img.png" class="img" />
Object-fit attribute
.img {
object-fit: none;
}
Object-fit: fill | contain | cover | none | scale-down
specifies how to populate the contents of alternative elements.
- Fill Content width and height stretch fill.
- Contain Keep the original proportion of the picture, zoom and fill. (but does not overflow)
- Cover Keep the original proportion of the picture, zoom and fill. (overflow)
- None Do not zoom. (the overflow part is cropped to show)
- Scale-down If it overflows, the image is scaled to its original scale. If it does not overflow, it is not scaled.
Picture alignment object-position
specifies the alignment of the contents of alternative elements.
.img {
object-position: top left;
}
Align the upper left corner.
Background-position is used to specify the alignment of the background image defined by the background-image property. Img is a replacement element, and the content of the picture is not a background, so background-position is not valid for img (replacement elements).