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

Question

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

我做了一点 fiddle ，所以你可以看到我在做什么。里面也有一些图片。 https://www.bootply.com/EEjlR9IaFN#

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

Answer 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/