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
属性来控制图片在容器中的显示方式,以实现不同的布局效果。你可以根据具体需求选择适合的值来使图片在容器中得到合适的展示。