调整 div 旁边的背景图片大小

Question

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

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

将background-size: cover;添加到正文

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

Answer 2

添加到您的风格：

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() 以获得 100% 的视口宽度 (vw) 减去 block1

的宽度

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 Query 根据屏幕宽度拆分您的样式，如下所示：

@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
  }
}

调整 div 旁边的背景图片大小

Resizing Background Image next to div

html

css

background-image

responsive