如何在一行中显示多个图像，始终覆盖全宽答案

【问题标题】：How to show multiple images in a row covering full width always如何在一行中显示多个图像，始终覆盖全宽
【发布时间】：2018-02-05 16:25:22
【问题描述】：

我想在一个框中显示多个相同高度和宽度（154 像素 x 125 像素）的图像（最多 24 个）。这很容易做到。但问题是当没有足够的空间来调整最后一张图像时，它会留下空白。我希望图像在任何屏幕尺寸下自动调整为框的全宽。我该怎么办？

.tab-content {
    background-color: #0c1011;
    padding: 0px 0px;
    margin-bottom: 0px;
    display: block;
    overflow: hidden;
}
.tab-pane img {
    display: inline-block;
    float: left;
}
.tab-pane a {
    display: block;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
  </div>
</div>

这是代码笔：

https://codepen.io/nitingsingh/pen/rJeROm

【问题讨论】：

你想要一行多少张图片？
codepen.io/anon/pen/NyNJXN 为连续 8 张图片添加此样式 img.img-responsive { width: 12.5%; }
我希望始终保持相同的图像宽度和高度。 & 台式机为 10，平板电脑为 5，移动设备为 2。 & 总是覆盖整个宽度 ?不可能。
即使使用 JS/jQuery 也无法做到这一点。你想保持imgs的尺寸（你已经在这里失败了），总是覆盖行宽并用@media改变imgs的数量，当然你不能这样做，不合逻辑。
@VXp 当然。我正在尝试发扬 Vivek Athalye 的答案，以编程方式进行一些更改。

标签： html css responsive-design

【解决方案1】：

您可能想查看 CSS3 中的弹性框。参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这应该对你有帮助。检查这个：

body {margin:0} /* addition */

.tab-content {
  background-color: #0c1011;
  padding: 0; /* shorthand */
  margin-bottom: none;
  /*display: block; by default*/
  overflow: hidden;
}

.tab-pane {
  display: flex;
  flex-wrap: wrap;
}

.tab-pane a {
  flex: 1 0 auto; /* shorthand | flex-grow: 1; | flex-shrink: 0; | flex-basis: auto */
}

.img-responsive {
  display: block;
  width: 100%;
}

<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
  </div>
</div>

【讨论】：

@VXp 真的吗？ I want the images to auto adjust to full width of the box at any screen size。这是我读过的。你？我可能对它的理解与 OP 的要求不同。但我肯定读过它：P
cmets部分写的，我三个都写了。
@VivekAthalye 这很有帮助。
@hashtagerrors 很高兴它有帮助。你可以考虑接受它作为答案。
@VivekAthalye 当然。但在此之前，我将尝试更多的改变。请稍等。

【解决方案2】：

             .tab-content {
                       width:100%;
                       display: flex;
                       flex-grow:1;
                       flex-shrink:1;
                       justify-content:space-evenly;

                 }

             .img-responsive {
                    max-width:150px;
                    max-height:126px;
             }

如果您不希望图像变大，请使用最大宽度；如果您希望图像至少为 150 像素，请使用最小宽度，您也可以使用 justify-content: space-around ；你应该使用 flex 方法。

【讨论】：