CSS背景圖片屬性

Question

這是我的HTML：

<div id="banner" style="background-image: url("img/banner.jpg")">
  <img src="img/logo.png" alt="logo" />
</div>

這是我的CSS：

#banner {
  width: auto;
  height: 100vw;
  background: url("/img/banner.jpg");

我希望banner.jpg成為具有完整視口填充的那個div的背景...怎么辦？

Answer 1

添加以下CSS代碼：

    #banner{
    width: %100;
    }

Answer 2

這就是我將如何實現效果https://jsfiddle.net/d5Lptwut/10/

<div id="banner">
  <img src="img/logo.png" alt="logo" />
</div>

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#banner {
  background: url('/img/banner.jpg') no-repeat center center;
  height: 100%;
  width: 100%;
  background-size: cover;
}