Html 响应的图像行

我必须在彩色div背景上包括一行7幅图像。 它们应该在普通桌面上显示为一行，但对于背景div如下的较小桌面，它们会很好地断开（有些文本是白色的，否则您无法阅读）

我找了这么多，却没有找到解决办法

这就是我到目前为止的情况：

<div class="login_footer container">
        <div class="row">
          <div class="col-md-8 col-sm-12" >
              <img class="img-responsive" src="/img/1.png" width="180px"/> 
              <img class="img-responsive" src="/img/2.png" width="120px" />
              <img class="img-responsive" src="/img/3.png" width="120px"/>
              <img class="img-responsive" src="/img/4.png" width="120px"/>
              <img class="img-responsive" src="/img/5.png" width="120px"/>
              <img class="img-responsive" src="/img/6.png" width="120px"/>
              <img class="img-responsive" src="/img/7.png" width="120px"/>
          </div>
        </div>
      </div>

更小的显示（可能的响应中断示例）：

小型：

|  | img1 |
   | img2 |
   | img3 |
   | img4 |
   | img5 |
   | img6 |
   | img7 |
|

---

你问什么有点困惑

但我想你会问，如何设计你的图像，使它们始终适合屏幕大小？ 要在一个div中这样做，请执行以下操作：

      <div id="picturebox" >
          <img class="img-responsive" src="/img/1.png" width="180px"/> 
          <img class="img-responsive" src="/img/2.png" width="120px" />
          <img class="img-responsive" src="/img/3.png" width="120px"/>
          <img class="img-responsive" src="/img/4.png" width="120px"/>
          <img class="img-responsive" src="/img/5.png" width="120px"/>
          <img class="img-responsive" src="/img/6.png" width="120px"/>
          <img class="img-responsive" src="/img/7.png" width="120px"/>
      </div>

---

CSS将确保图片适合该区域

。img responsive是一个不错的类名，但您必须为该类设置样式

试着给他们一个百分比宽度和一个最小宽度。这样，当屏幕小于最小宽度的7*时，图像将断开一条线，但当有足够的空间时，您可以将所有7个图像都放在一行中

---

100/7=14.2857143%的宽度。可能是14%，用额外的填充物填充。当所有图像都等于100%时，将图像向左浮动以确保安全。

.img responsive

仅使图像的最大宽度为其父图像的100%，在这种情况下，父图像是

col-xs-12 col-md-8

。要使图像行流动，可以执行以下操作：

演示： CSS——注意CSS是如何从最小到最大开始的。这是为了学习，如果你需要更具体的东西，尽你最大的努力，重新发布另一个问题

.image-list {
    padding: 0;
    margin: 0;
    list-style: none;
    background:red;
}

.image-list li {
    padding: 2px;
    float: left;
}

.image-list li:first-child {
    width: 50%
}

.image-list li:not(:first-child) {
    width: 50%
}

@media (min-width:400px) { 
    .image-list li:first-child {
        width: 25%
    }

    .image-list li:not(:first-child) {
        width: 15.7142857142857%
    }
}

@media (min-width:600px) { 
    .image-list li:first-child {
        width: 20%
    }

    .image-list li:not(:first-child) {
        width: 13.333%
    }
}

HTML

<div class="login_footer container">
        <div class="row">
          <div class="col-md-8 col-sm-12">
            <ul class="image-list clearfix">
              <li><img class="img-responsive" src="http://placehold.it/180x100/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
            </ul>
          </div>
        </div>
      </div>  

我不能完全确定您的问题，您可以使用flexbox型号。使用HTML，添加此CSS

.bgrow{background:url(http://1.bp.blogspot.com/-jSNnv5wdpr4/Ug5-RLm3uEI/AAAAAAAALsE/KG0a21yC3HQ/s1600/binary-digital-city-abstract.jpg) no-repeat 50%; background-size:cover; padding:20px;}
.img-row{display:flex; flex-wrap:wrap}
.img-responsive{flex-grow:1; width:auto; max-width:180px; height:auto !important}

您将有图像或div调整到所有可用宽度

---

但是，如果要使图像保持在同一行中，请将

flex wrap

更改为

nowrap

。同样，也不完全确定您想要实现什么，但是使用这种方法，您可以水平和垂直居中、重新排列、反转、包裹，您可以想到的任何东西。请参阅和查看大量示例

我可以看出，使用“内联块”设置图像样式有点帮助：）为了澄清，您是否希望7幅图像均匀地填充桌面上容器的宽度？最好显示您想要的图形，并准确描述照片的宽度…@ShawnTaylor是的，我希望这7幅图像在桌面上均匀地填充容器的宽度，但开始在较小的显示器上堆叠..img responsive是BootstrapThanks中的默认类，在标记中没有看到。

.image-list {
    padding: 0;
    margin: 0;
    list-style: none;
    background:red;
}

.image-list li {
    padding: 2px;
    float: left;
}

.image-list li:first-child {
    width: 50%
}

.image-list li:not(:first-child) {
    width: 50%
}

@media (min-width:400px) { 
    .image-list li:first-child {
        width: 25%
    }

    .image-list li:not(:first-child) {
        width: 15.7142857142857%
    }
}

@media (min-width:600px) { 
    .image-list li:first-child {
        width: 20%
    }

    .image-list li:not(:first-child) {
        width: 13.333%
    }
}

<div class="login_footer container">
        <div class="row">
          <div class="col-md-8 col-sm-12">
            <ul class="image-list clearfix">
              <li><img class="img-responsive" src="http://placehold.it/180x100/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
              <li><img class="img-responsive" src="http://placehold.it/120x50/000000/FFFFFF&text=image"/></li>
            </ul>
          </div>
        </div>
      </div>  

.bgrow{background:url(http://1.bp.blogspot.com/-jSNnv5wdpr4/Ug5-RLm3uEI/AAAAAAAALsE/KG0a21yC3HQ/s1600/binary-digital-city-abstract.jpg) no-repeat 50%; background-size:cover; padding:20px;}
.img-row{display:flex; flex-wrap:wrap}
.img-responsive{flex-grow:1; width:auto; max-width:180px; height:auto !important}