CSS中的object-fit属性有以下五个值:fill
、contain
、cover
、none
和scale-down
。
fill
:这是默认值,表示缩放后的图片将铺满整个容器,可能会变形。contain
:缩放图片到适合容器的尺寸,保持宽高比,不会出现空白区域。cover
:缩放图片以完全覆盖容器,可能会被裁剪。none
:保持图片原本的大小。scale-down
:缩放图片,如果它比contain
更小,则按contain
方式显示,否则按none
方式显示。这些关键词可以通过设置object-fit
属性来调整HTML元素中嵌入的图像的表现方式。这在设计响应式网页时非常重要,因为在不同的设备上,图像需要用不同的方式来展示。