当在手机和其他小屏幕上查看时，我的网站的背景图像变得不成比例
当在手机和其他小屏幕上查看时，我的网站的背景图像变得不成比例
提问于 2019-05-26 14:46:54
我在CSS中重新调整背景图像的大小以适应其他比笔记本电脑屏幕尺寸更小的屏幕时遇到了问题
我已经尝试过'background-size: contain‘和'background-repeat : no-repeat’。尽管如此，背景图像还是变得不成比例。我有一组图像参数，它是'height: 100vh;‘
/* with this, only a fraction of image is seen in phone */
header {
background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
background - size: cover;
height: 100 vh;
background - position: center;
background - repeat: no - repeat;
background - attachment: fixed;
}
/* with this a grey background appears in phone screens */
header {
background - image: -webkit - linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
background - image: linear - gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img / hero.jpg);
background - size: contain;
height: 100 vh;
background - position: center;
background - repeat: no - repeat;
background - attachment: fixed;
}我希望图像适合所有屏幕尺寸，而不会放大和模糊，但结果总是不成比例。
回答 3
Stack Overflow用户
发布于 2019-05-26 14:56:48
您必须使用媒体查询使其响应移动和其他设备。我不能理解您的代码，因为您没有提供任何html文件，其中应用css属性，但我建议使用媒体查询它有助于使您的页面对每个设备的响应。例如：
@media_queries{
max-width:100%;
min-width:100%
}Stack Overflow用户
发布于 2019-05-26 15:39:56
我的代码也有同样的问题，我只添加了一行：
.your-class {
height: 100vh;
}vh是视口高度。这将自动缩放以适合设备的浏览器窗口。
点击此处查看更多信息：How to make a div 100% height of the browser window?
Stack Overflow用户
发布于 2019-05-26 15:56:48
假设
background-size:cover;我建议你创建两个版本的背景图像-一个是横向的，一个是pc和笔记本电脑的，可以随着屏幕调整大小(屏幕的比例往往保持不变)，还有一个是肖像，一个是手机的。由于手机屏幕的比例不同，您的图像可能会在角落被截断。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56311314
复制相关文章
相似问题
腾讯云开发者
