我一直在尝试让网站的背景图像响应式地拉伸(stretch)/裁剪,同时保持其纵横比;我使用以下方法成功实现了一种影响。
body {
background-image: url('image.png');
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
当在桌面浏览器上查看时,这与调整图像以适应浏览器的变化纵横比完美配合。然而,当在移动设备 (Chrome) 上进行测试时,背景图像似乎忽略了“cover”值并返回到其原始大小 (MASSIVE),并在纵向和横向模式下直接切掉屏幕的一侧。
如何让移动版本保持其相对于浏览器窗口的大小,并实现与桌面版相同的行为?理想情况下,请只修复 CSS。
谢谢。
最佳答案
background-size: 100% 100%
(宽高)应该可以。
关于android - 手机上的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39196268/