如何在不裁剪的情況下使背景影像適合 Div？

使背景圖像適合 Div

要在 div 中顯示背景圖像而不裁剪它，請使用 background-size 屬性。根據您想要的結果，您可以選擇縮放影像以適合 div 或覆蓋整個 div。

縮放背景圖像以適合Div

如果您希望縮放背景圖像以使其在div 內保持完全可見，請將背景大小屬性設為

background-size: contain;

縮放背景影像以覆蓋整個Div

或者，如果您希望背景影像覆蓋整個div，請使用背景大小屬性設定為

background-size: cover;

範例

以下是一些範例來說明這些設定的效果：

<div><ul>
<li>帶背景-size: contains;，影像將縮小以適合div，保留其寬高比</li>
<li>使用background-size: cover;，影像將被拉伸以覆蓋整個div，可能會扭曲其縱橫比。 </li>
</ul></div>

以上是如何在不裁剪的情況下使背景影像適合 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！