具有响应式背景的同一行上的五个图像（响应行）答案

【问题标题】：Five images on the same row with responsive background (responsive row)具有响应式背景的同一行上的五个图像（响应行）
【发布时间】：2017-02-10 00:24:38
【问题描述】：

我尝试创建一个响应式行，其中包含桌面上的五个内联图像、平板电脑上的两列和智能手机上的列。

我还在这五张图片下方放置了一张背景图片，但我希望这些图片在我使用小型桌面、桌子或智能手机时能够响应。

这是我尝试做的，但我认为这不是一个好的解决方案，因为背景并没有真正响应：

HTML

<div class="background">
 <div class="layer">
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
  </div>
 </dvi>
</div>

CSS

.background {
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    padding: 100px 100px 300px 100px;
}

.div-diviso {
    width: 20%;
    padding: 15px;
    position: relative;
    float: left;
    text-align: center;
}


@media (min-width: 768px) and (max-width: 980px) {
 .layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    padding: 0px 0px 900px 0px;
    text-align: center;
}
.div-diviso {
    width: 50%;
    padding: 15px;
    position: relative;
    float: left;
    text-align: center;
}
}

@media (max-width: 767px) {
 .layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    padding: 0px 0px 1500px 0px;
    text-align: center;
}
.div-diviso {
    width: 100%;
    padding: 15px;
    position: relative;
    float: left;
    text-align: center;
}
}

这就是我想要的：

Example image

【问题讨论】：

您可以通过将所有.div-diviso 元素设置为display:inline-block; 来使这个响应相当灵敏而无需断点。
如果你想使用外部库 Bootstrap 就是这样。

标签： css responsive-design responsive

【解决方案1】：

.background {
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}

.layer {
    background-color: rgba(18, 29, 47, 0.96);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}

.div-diviso {
    width: 17%;
    padding: 10px;
    display: inline-block;
}
.div-diviso img {
  width: 100%;
}


@media (min-width: 768px) and (max-width: 980px) {
 .layer {
    padding: 0px 0px 900px 0px;
    text-align: center;
}
.div-diviso {
    width: 47%;
    padding: 10px;
}
}

@media (max-width: 767px) {
 .layer {
    padding: 0px 0px 1500px 0px;
    text-align: center;
}
.div-diviso {
    width: 98%;
    padding: 5px;
}
}

<div class="background">
 <div class="layer">
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
  </div>
  <div class="div-diviso">
   <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
  </div>
 </div>
</div>

更改宽度百分比并使用 display: inline-block 代替位置。注意：您不必在媒体查询中重复相同的代码

【讨论】：