如何连续显示覆盖全宽的多个图像

Question

我想在一个方框中显示相同高度和宽度（154px x 125px）的多个图像（最大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>

这是codepen：

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

Answer 1

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

那应该对你有所帮助。检查一下：

UserDefaults.standard.removeObject(forKey: "yourKey")

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%;
}

Answer 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;
             }

如果您不希望图像变大，请使用最大宽度，如果您希望图像达到150px，则使用最小宽度，您也可以使用justify-content：space-around;你应该使用flex方法。