[英]Background-size: cover causing background image to resize on touch in mobile Chrome
我在將移動設備頁面的背景圖像設置為為移動設備設計的新圖像時遇到問題。 圖像設置為background-size: cover ，並且在移動Chrome之外的所有其他設備上都能正常工作。 在移動Chrome瀏覽器中滾動時，圖像尺寸會略微調整。 該設計還具有絕對的頁腳。 您可以在此處查看它的運行情況：
body { height: 100%; overflow: scroll; } .image { display: block; background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .footer { display: block; position: absolute; width: 100%; bottom: -69px; background-color: green; }
<body> <div class="wrap"> <div class="image"> </div> <div class="footer"> <p> Footer info </p> <p> More footer info</p> </div> </div> </body>
如果它覆蓋了背景，則為滾動留下了空間。 也許限制容器。 或考慮使用任何一種媒體查詢來將問題歸結為移動設備尺寸。 將其切換為僅包含在移動設備上。 或刪除移動設備上的溢出滾動條。
Chrome-背景尺寸：基於封面的圖片庫會導致性能問題
[英]Chrome - background-size: cover;-based gallery causes performance issues
調整 canvas 圖像大小，如“背景大小：封面”和響應式
[英]Adjust canvas image size like 'background-size: cover' and responsive
相對於特定圖像點的元素，其背景大小為：cover
[英]Element relative to specific Image point which is background-size : cover
當背景尺寸被覆蓋時，如何獲得當前的“真實”背景圖像尺寸？
[英]How to get the current, “real”, background image size, when background-size is cover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.