Question

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

我做了一点小提琴，所以你可以看到我在做什么。那里也有一些图像。 https://www.bootply.com/EEjlR9IaFN#

所以问题是设置image / div的宽度和高度会导致它扩展到bootstrap容器之外并且它没有响应。所以这就是我被困住的地方，我想不出一种方法可以让这些图像适合这个容器并且具有响应性。我只是使用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/

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

1 个答案: