[英]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.