img 渲染图片，可以理解为一张镂空的白纸，通过镂空区域看到白纸下的图片。
图片尺寸
即镂空区域的大小
- 若未指定，则按图片原始尺寸显示；
- 若指定，则默认按指定尺寸显示（若指定尺寸的宽高比与原始的宽高比不同，则会拉伸为指定尺寸），通过 object-fit 样式，可以修改宽高比不同时的图标表现。
- 宽度 width
- 高度 height
图片的展示方式 object-fit
即图片在镂空区域中的呈现方式，是否缩放，是否改变自身宽高比等。
| 值 | 描述 |
|---|---|
| fill | 默认值。调整替换内容的大小来填充元素的内容框。如有必要，对象将被拉伸或挤压。 |
| contain | 缩放被替换的内容以保持其宽高比，同时适合元素的内容框。 |
| cover | 调整被替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪。 |
| none | 替换的内容不会调整大小。 |
| scale-down | 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
- 缩略图使用 cover
- 列表图使用contain
- 全屏大图预览使用 scale-down
<div class="m-4 text-align-center inline-block">
<img src="/EC_Logo.jpg" style="background-color: black; height: 80px; width: 160px" />
<label>默认 object-fit: fill</label>
</div>
<div class="m-4 text-align-center inline-block">
<img
src="/EC_Logo.jpg"
style="object-fit: cover; background-color: black; height: 80px; width: 160px"
/>
<label>object-fit: cover</label>
</div>
<div class="m-4 text-align-center inline-block">
<img
src="/EC_Logo.jpg"
style="object-fit: contain; background-color: black; height: 80px; width: 160px"
/>
<label>object-fit: contain</label>
</div>
<div class="m-4 text-align-center inline-block">
<img
src="/EC_Logo.jpg"
style="object-fit: none; background-color: black; height: 80px; width: 160px"
/>
<label>object-fit: none</label>
</div>
<hr />
<div class="m-4 inline-block">
<div class="flex flex-col justify-center items-center">
<div>
<img
src="/EC_Logo.jpg"
style="object-fit: scale-down; background-color: black; height: 80px; width: 160px"
/>
</div>
<div>
<label>object-fit: scale-down(width 较大)</label>
</div>
</div>
</div>
<div class="m-4 inline-block">
<div class="flex flex-col justify-center items-center">
<div>
<img
src="/EC_Logo.jpg"
style="object-fit: scale-down; background-color: black; height: 160px; width: 80px"
/>
</div>
<div>
<label>object-fit: scale-down(height 较大)</label>
</div>
</div>
</div>
图片的展示区域 object-position
在图片展示方式确定的基础上，通过平移图片来改变图片的展示内容
以添加样式 object-position: right bottom 为例，按图片右下角对齐平移，效果如下
- 默认值为 50% 50% 图像的中心与镂空区域的中心对齐
- 还可用 top、bottom、left、right、center 、px、em、% 混合设置，如
object-position: 20px 2em;
object-position: right 20px bottom 2em;
将 object-position 设置为 20% 40%，这意味着图像左边 20% 的垂直线与内容框左边20% 的垂直线重合，图像顶部40% 的水平线与内容框顶部40%的水平线重合
图片裁剪 clip-path
仅改变镂空区域的形状，不会改变图片的尺寸，即图片所占页面的空间不变
https://blog.csdn.net/weixin_41192489/article/details/121341551
图片滤镜 filter
https://www.runoob.com/cssref/css3-pr-filter.html
