css图片缩放属性object-fit说明_属性值

object-fit 属性可以设置以下值:

属性值

说明

例子

fill

填充容器,可能会改变图片的比例。

object-fit: fill;

contain

保持图片的原始比例,确保图片完全包含在容器内。

object-fit: contain;

cover

保持图片的原始比例,确保图片覆盖整个容器,可能会被裁剪。

object-fit: cover;

none

不对图片进行任何缩放或调整,保持图片的原始尺寸。

object-fit: none;

scale-down

根据图片的大小和容器的大小进行缩放,选择 fill 或 contain 中的较小值。

object-fit: scale-down;

这些值可以通过设置 object-fit 属性来控制图片在容器中的显示方式,以实现不同的布局效果。你可以根据具体需求选择适合的值来使图片在容器中得到合适的展示。