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
?屬性來控制圖片在容器中的顯示方式,以實現不同的布局效果。你可以根據具體需求選擇適合的值來使圖片在容器中得到合適的展示。