當我在我的 div 中放置背景影像為其創建背景時，整個網頁的水平滾動條。我認為這是因為我background-size: cover;使背景影像增長到其原始大小，但我希望影像完全按比例縮小以適合所有設備。
Codepen：https ://codepen.io/Javscript/pen/WNXmRMp?editors=1100
uj5u.com熱心網友回復：
滾動條與背景影像無關，甚至與具有背景影像的元素無關。（順便說一句，背景影像永遠不會影響盒子的大小。）
.main-con 元素的寬度為 100%，邊距為 160px。100% 不是指剩余空間；它指的是父元素的寬度，在這種情況下是主體。
所以 .main-con 元素和 body/screen 一樣大，但是離左側有 160px 的距離，導致它在右側溢位了 160px。
在不完全重新實作您的網站的情況下解決此問題的一種方法是將 .main-con 元素的寬度設定為 calc(100% - 160px)。
uj5u.com熱心網友回復：
嘗試使用此屬性：
background-size: contain;
background-repeat: no-repeat;;
值覆寫和包含之間的區別在于：
1-封面：使背景覆寫整個div
2- 大小：使背景適合 div
uj5u.com熱心網友回復：
您將背景影像的大小設定為 100%。但你也有你的側邊欄。所以影像本身不能占據所有 100% 的螢屏。嘗試對 .main-con 使用 calc(100% - 160px)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438240.html
下一篇：無法在js檔案中指定影像路徑