Question

当我调整窗口大小时（至少在Firefox中），然后我的div彼此分开。我怎样才能让我的div很好地相互接触？

请记住，整个背景图像必须完全显示，我有解决方案，背景图像在滚动条后面，但我不想要。

＆＃13;

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.Div1 {
    background-image: url("https://imgur.com/7NQ3IOt.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 76.1vw;
    width: 100%;
}

.Div2 {
    background-image: url("https://imgur.com/CjVMSqG.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 169vw;
    width: 100%;
}

.Btns {
    position: absolute;
    font-size: 2.1vw;
    left: 16.5vw;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="top: 4.8vw">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="top: 4.3vw">Button 1</button>
    </div>
</body>
</html>

＆＃13;

Answer 1

你的divs互相碰触。但是第一个div的背景图像的高度小于div的高度。

从背景大小规则中移除逗号：background-size: 100% 100%;。

Answer 2

您可以使用background-size:cover。那是你要的吗？ cover属性用于覆盖整个容器的背景图像。

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.Div1 {
    background-image: url("https://imgur.com/7NQ3IOt.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    position: relative;
    height: 76.1vw;
    width: 100%;
}

.Div2 {
    background-image: url("https://imgur.com/CjVMSqG.jpg");
    background-size: 100%, 100%;
    background-repeat: no-repeat;

    position: relative;
    height: 169vw;
    width: 100%;
}

.Btns {
    position: absolute;
    font-size: 2.1vw;
    left: 16.5vw;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="Div1">
        <button class="Btns" style="top: 4.8vw">Button 1</button>
    </div>
    <div class="Div2">
        <button class="Btns" style="top: 4.3vw">Button 1</button>
    </div>
</body>
</html>

Answer 3

你有一个小错字将background-size: 100%, 100%;更改为background-size: 100% 100%;

删除100％

旁边的逗号

HTML如何让divs相互接触

3 个答案: