我希望我的背景图片在移动 View 中响应。
我用它来将我的背景图像缩放到整个桌面:
html {
background:url("image/2.jpg") no-repeat center center fixed;
background-size: cover;
}
但我在这方面没有很好的结果:(这是我搜索中最需要的建议)
@media only screen and (max-width: 600px) {
html{
width: 100%;
}
}
这是桌面背景
虽然这是在我的移动 View 中发生的情况 
最佳答案
一个优雅的解决方案是更好地控制您想要在横向和纵向模式下显示的内容。如果您想在纵向屏幕上响应横向图像，您必须按照@salff 评论“丢失一些东西”
我根据用户屏幕更加灵活的代码段:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html
{
background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
background-size: cover;
width: 100%;
}
#warning-message { display: none; }
@media only screen and (orientation:portrait)
{
#wrapper { display:none; }
#warning-message { display:block; color: white;}
html
{
background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
background-size: cover;
height: 100%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<h2>Responsive Images</h2>
<p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
<p>Resize the browser window to see the effect.</p>
</div>
<div id="warning-message">
this website is only viewable in landscape mode
</div>
</body>
</html>
注意:代码是通过交叉和调整您的代码生成的，w3schools snippet和 this answer
关于html - 使用纯 css 响应移动 View 的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53892574/