当用电话和其他小屏幕尺寸查看时，我网站的背景图像不成比例

Question

我在重新调整CSS的背景图像时有问题，以适合其他较小的屏幕，而不是笔记本电脑的预期屏幕尺寸

我已经尝试了"背景大小：包含"one_answers"背景重复：no-repeat'。尽管如此，背景图像不成比例。我有一组图像参数，即"高度：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;
}

我希望图像适合所有屏幕大小，而不会放大和模糊，但是结果总是不合时宜。

Answer 1

您必须使用媒体查询来使其对移动设备和其他设备进行响应。我无法理解您的代码，因为您不提供任何应用CSS属性的HTML文件，但我建议使用媒体查询它可以帮助您使您对每个设备的页面响应。例如：

@media_queries{
max-width:100%;
min-width:100%
}

Answer 2

同样的问题是我的代码，我只添加一行：

.your-class {
height: 100vh;
    }

VH是视口高。这将自动扩展以适合设备的浏览器窗口。

在此处检查更多：如何使浏览器窗口的DIV 100％高度？

Answer 3

假设

background-size:cover;

正在工作我建议您创建两个版本的背景图像 - 一个景观图像，用于PC和笔记本电脑，并在屏幕上进行调整(屏幕的比例往往保持相似(，以及用于移动电话的肖像。由于电话屏幕比例不同，您的图像可能会在角落切断。