图片（替换型元素）内容填充和对齐方式

图片填充方式 object-fit

img 元素

<img src="./img.png" class="img" />

object-fit 属性

.img {
  object-fit: none;
}

object-fit: fill | contain | cover | none | scale-down

指定替换型元素内容的填充方式。

1. fill

内容宽高拉伸填充。

2. contain

保持图片原有比例，缩放填充。(但不溢出)

3. cover

保持图片原有比例，缩放填充。(溢出)

4. none

不缩放。(溢出部分被裁剪显示)

5. scale-down

如果会溢出，则按图片原有比例缩放。如果不溢出，则不缩放。

图片对齐方式 object-position

指定替换型元素内容的对齐方式。

.img {
  object-position: top left;
}

对齐左上角。

与 background-position 区别

background-position 用于指定由 background-image 属性定义的背景图的对齐方式。

img 属于替换型元素，图片内容并不是背景，所以 background-position 对 img（替换型元素）无效。