調整 div 旁邊的背景圖像大小

Question

我正在嘗試使我的首頁具有響應性，並且實際上只需要擔心 2 個元素。 我有一個從左側開始的背景圖像和一個包含與屏幕右側關聯的各種對象的 div。 我想要它，以便當瀏覽器縮小時，背景圖像會適當縮小，以便右側的 div 不會開始與圖像相交。 根據需要，我願意讓背景圖像完全消失，以便 div 有更多空間。 我怎么能做到這一點？ 代碼非常簡單。 只是從左側開始的背景圖像和右側的 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

添加到您的風格：

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