响应的图像行

Question

我必须在彩色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>

通过此设置，图像可以叠加在桌面上。 我是否天真地认为将“img-responsive”解决所有问题？ 设置图像的宽度是否有负面影响？ 不幸的是，这些图像的大小并不相同，我不得不在那里摆弄它们以使它们看起来很好。

编辑：我如何想象事物的草图：

桌面：

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

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

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

小：

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

Answer 1

我不完全确定你的问题，你可以使用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 。 同样，不完全确定你想要实现什么，但是使用这种方法，你可以水平和垂直居中，重新安排，反向，包裹，无论你能想到什么。 有关大量示例，请参阅Mozilla上的Flex定义和Flexbox的完整指南

Answer 2

.img-responsive只使图像max-width：100％到它的父级，在这种情况下，父级是col-xs-12 col-md-8 。 要使图像行流畅，您可以执行以下操作：

演示： http ： //jsbin.com/zikune/1/edit

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>  

Answer 3

有点困惑你的要求......

但我认为你问你如何设计图像的样式，以便它们始终适合屏幕尺寸？ 像这样在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中输入：

#picturebox{
width: 80%
background-color: grey;
color: white;
}

CSS将确保图片适合该区域

Answer 4

.img-responsive不是一个糟糕的类名，但你必须设置该类的样式。

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

100/7 = 14.2857143％宽度。 也许使它14％并使用额外填充之间。 当所有图像都达到100％时，将图像浮动为安全的。