如何获取包含背景图像以覆盖整个div？ [重复]

Question

这个问题在这里已有答案：

• Make background image the size of screen 1回答

好的，我的问题是如何让我的图像更具响应性？我是一名新编码员，所以我还在努力了解css。我已经尝试使用包含值，但它不包括整个div。我也尝试过封面，但是当它在div内扩展时它并没有显示整个图像。如果有人有任何想法，我很乐意听取您的意见。谢谢此外，它与覆盖整个页面的问题不同。我希望图像覆盖在我的div中，它似乎不起作用。

.tribute {
  margin-top: 40px;
  margin-left: 12%;
  height: 250px;
  width: 35%;
  background: url(dickgregory.jpg);
  background-size: cover;
  float: left;
}

<div id="projects">
    <br>
    <br>
    <h1 class="centerh1">Projects</h1>
    <hr class="portfoliohr">
    <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
        <div class="tribute">
        </div>
    </a>
</div>

Answer 1

你的图像占据了你的width元素的完整height和.tribute。问题是你们都将margin添加到.tribute元素，并限制其width。

删除边距并将width设置为100%会显示覆盖整个区域的图像。

请注意，background-size: cover可能拉伸或裁剪图像，background-size: contain将调整图像大小以确保它始终可见。

用一个例子可以很好地证明这一点。

包含：

.tribute {
  height: 250px;
  width: 100%;
  background: url(http://placekitten.com/310);
  background-size: contain;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
    <div class="tribute">
    </div>
  </a>
</div>

覆盖：

.tribute {
  height: 250px;
  width: 100%;
  background: url(http://placekitten.com/310);
  background-size: cover;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
    <div class="tribute">
    </div>
  </a>
</div>

希望这可以帮助！ :)

Answer 2

不幸的是，cover和contain是处理图像的最佳方式，而不是你想要的比例。您可以使用<img>标签而不是带有背景图像的div，如果这样可以供您使用。否则，我通常会向与图像类似的元素添加背景颜色，以便更好地融合。

.tribute {
  margin-top: 40px;
  margin-left: 12%;
  height: 250px;
  width: 35%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #666;
  float: left;
}

<div id="projects">
  <br>
  <br>
  <h1 class="centerh1">Projects</h1>
  <hr class="portfoliohr">
  <a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
   <div class="tribute">
   </div>
  </a>
</div>