CSS 背景图像适合空的 div 并具有响应性

【问题标题】：CSS background images fit inside a empty div and be responsiveCSS 背景图像适合空的 div 并具有响应性
【发布时间】：2018-04-10 08:12:58
【问题描述】：

从后端转移到前端，我得到了一个设计，但不知道处理如何实现它的最佳方法。这将是大约 6 个或一些图像或分层。所有图片均为 1920 像素宽 * X 像素高。

我做了一个小技巧，以便您可以看到我正在处理的内容。里面也有几张图。 https://www.bootply.com/EEjlR9IaFN#

所以问题是设置图像/div 的宽度和高度会导致它延伸到引导容器之外并且它没有响应。所以这就是我被卡住的地方，我想不出一种方法来让这些图像适合这个容器并做出响应。我本来打算只使用 img 标签，但如果可以的话，我宁愿通过 css 来做

【问题讨论】：

标签： html css

【解决方案1】：

你可以做一个小技巧，我学会了做同样的事情，它把一个图片放在后面作为响应，把背景放在前面。

HTML：

<div class="element">
    <div class="background-image"></div>
    <img src="http://via.placeholder.com/1920x1080" class="image-responsive" alt="">
</div>

CSS：

.element{
  position: relative;
  display: inline-block;
}
.background-image{
  background-image: url('http://sharksharkshark.net/snow.png');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.image-responsive{
  max-width: 100%;
}

注意：您可以播放和更改响应式背景图像的大小。这样，div 不会为空，而是会响应。

示例： https://jsfiddle.net/grg9rc7z/1/

【讨论】：

非常感谢您的意见！这是一个很棒的小工作。