时间戳

首页 > 解决方案 > 如何制作背景图像以适应移动设备上可见区域的大小？

html - 如何制作背景图像以适应移动设备上可见区域的大小？

问题描述

当您在移动设备上打开网站时，您可以看到背景图片取决于页面上的内容量，多的地方 - 背景图片增加，少的地方 - 减少。因此，例如，当您在移动设备上打开导航面板时，您可以看到背景显着增加，因为面板分开并且内容变得更多。如何使背景与内容量无关，仅取决于观看区域。

目前在 css 和 html 中是什么

<body class="bg-image1">
body {  
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;

    height: 100%;
    min-height: 100%;
}
.bg-image1 {  
        background-image: url(path); 
}

标签： htmlcssbootstrap-4

解决方案

.bg-image1 {  
    background-image: url(путь); 
    height: 100vh; /* may need !important*/
    width: 100vw; /* may need !important*/
}

vw和vh分别代表视口宽度和视口高度。因此，图像将被调整为浏览器窗口的尺寸。如果在移动设备上显示图像时键盘在任何时候弹出以进行交互，则视口高度将发生变化，图像的高度也会发生变化。只是要记住一些事情。

推荐阅读