html - 如何连续显示多个图像始终覆盖整个宽度

Question

我想在一个框中显示相同高度和宽度(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

Answer 1

您可能想看看 CSS3 中的 flexbox 。 引用: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>