手机上的背景图像

我一直在试图获得一个网站的背景图像，以响应性地拉伸/裁剪，同时保持其纵横比;我使用以下方法成功实现了这种效果。手机上的背景图像

body { 
 
\t background-image: url('image.png'); 
 
    background-position: center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
}

当在桌面浏览器这样工作完全与图像调整以适合浏览器的变化纵横比查看。但是，在移动设备（Chrome）上进行测试时，背景图像似乎忽略了“覆盖”值并恢复到其原始大小（MASSIVE），并在纵向和横向模式中直接从屏幕侧面切下。

如何获得移动版本以维持其相对于浏览器窗口的大小并实现我已经获得的桌面相同的行为？理想情况下，CSS只修复请。

感谢。

来源

2016-08-28 Tom Jardine-Smith

我认为唯一的办法是使用@media在较小的屏幕上，您的问题是通过修复在我看来 – kolboc

background-size: 100% 100%（宽度高度）应该工作。

来源

2016-08-28 22:58:19 StevenC

我试过，但随后与图像的宽高比混乱，因此看起来很糟糕。：S –

[www.scottychamsmusic.com]（http://www.scottychamsmusic.com/）这是沿着你在找什么？ – StevenC

不可以。请参阅这是强制高宽比在图像上发生变化，因此它会被拉伸和扭曲。我在寻找这个：（从桌面网页浏览器看背景图片 - 铬是最好的 - http://www.beckyspetservices.co.uk/）。它适用于从桌面查看的情况，但在移动设备上查看时，图像无法正确缩放，并且仍然太大。 –

手机上的背景图像

回答

相关问题