img 图片适应容器宽度

1. object-fit: cover
img { width: 100%; height: 100%; object-fit: cover; }
cover 值确保图像的较窄部分完全填充容器例如: 图片高度很高,我们看到的是其完整的宽度,不是其完整的高度

2. object-fit: contain
img { width: 100%; height: 100%; object-fit: contain; }
contain默认值 保持其自然的宽高比,剩余位置不填充

3. object-fit: none
img { width: 100%; height: 100%; object-fit: none; }
none 值保持图像的正常大小，因此在容器中看不到图像的顶部、底部和两侧。
默认情况下，图像的中心与内容框的中心对齐

4. object-fit: scale-down
scale-down 属性与 none 或 contain 相同。它选择使图像显示得更小的那个
容器比图像小,它会选择 contain。如果我们的容器比图像大，none 会占主导地位

5. object-fit: fill
就像没有设置 object-fit,fill 属性可能会扭曲图像,自适应容器大小。这是因为，默认情况下，图像无论设置了什么尺寸都会填充其内容框。
参考王大冶老师