首頁 >web前端 >css教學 >如何讓背景圖片不裁剪而適合 Div?

如何讓背景圖片不裁剪而適合 Div?

Barbara Streisand
Barbara Streisand原創
2024-12-23 01:52:32672瀏覽

How Can I Make a Background Image Fit a Div Without Cropping?

讓背景影像適合 Div

問題:
div 內的背景影像被剪切。期望的結果是在不裁剪的情況下顯示整個影像。

解決方案:

要保留 div 內背景影像的完整性,請利用 background-size 屬性。此屬性指示影像相對於其容器的縮放方式。

透過使用以下值,您可以實現預期結果:

  • 包含: 縮放影像適合 div,並保持其縱橫比。
  • 封面:縮放影像以覆蓋整個 div,可能會裁切影像的部分內容。

程式碼範例:

包含:

background-size: contain;

封面:

background-size: cover;

註: 大多數現代都支援背景大小屬性瀏覽器。

以上是如何讓背景圖片不裁剪而適合 Div?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn