调整分区旁边的背景图像的大小

Question

我正在努力让我的首页响应，实际上只有两个元素需要担心。我有一个从左边开始的背景图像和一个包含与屏幕右侧相关联的各种对象的div。我想让它在浏览器收缩时，背景图像适当地收缩，这样右侧的div就不会开始与图像相交。根据需要，在某一点之后，我愿意让背景图像完全消失，这样div就有了更多的空间。我该怎么做？代码非常简单。只是一个从左边开始的背景图像和一个右边为0%的div。

body
{
background-color: #EAE7DC;
background-image: url("images/Earth.jpg");
background-repeat: no-repeat;
}
.block1
{
position: absolute;
right: 0%;
top: 113px;
min-width: 415px;
}

<div class="block1">
<h1>Log In</h1>
<form>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="button" onclick="logIn()">Log In</button>
</form>
</div>

Answer 1

添加到您的风格中：

body
{
background-color: #EAE7DC;
background-image: url("images/Earth.jpg");
background-repeat: no-repeat;
background-size: calc(100vw - 430px) 100%;
}

background-size中的第一个表达式是width，第二个是height。我使用calc((来获得视口宽度(vw(减去块1 宽度的100%

Answer 2

将background-size: cover;添加到主体

代码笔：https://codepen.io/manaskhandelwal1/pen/OJRodLX

Answer 3

这是w3schools的css代码，可能会对您有所帮助！

`

body, html {
height: 100%;
}

.bg {
/* The image used */
background-image: url("img_girl.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

`

Answer 4

为了让背景在某个时刻消失，您可以使用媒体查询根据屏幕宽度划分您的风格，如下所示：

@media only screen and (max-width: 400px) {
body {
// style that applies only when screen width is less than 400px
}
}
@media only screen and (min-width: 401px) {
body {
// style that applies only when screen width is more than 401px
}
}