css - 小图像的响应式收集

Question

通常我会使用表格来收集数据，但它似乎有很多问题。我的目标是收集 5 宽 10 高的图像。图片大约为 150x150。但是，当我调整浏览器大小时，图像位于滚动框中。除了表格之外，还有更简单的方法来对这些图像进行分组吗？我应该使用媒体查询将它的大小调整为在特定屏幕尺寸下的两倍宽吗？

Answer 1

解决方案 1

这是基本图库的简单代码。它是响应式的，如果您的图像宽度和高度已定义并且都相同，则此代码即可。

.gallery {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  /* to align your elements in the middle of the page */
}
.gallery:after {
  /* To clear floated elements after your gallery */
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.gallery li {
  display: inline-block;
  margin: 0 3px 15px;
}
figure {
  margin: 0;
  padding: 0;
}

<ul class="gallery">
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/150x150">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
</ul>

解决方案 2

这是一个完全响应式的解决方案。在第一个解决方案中，您的 li 将始终具有相同的大小，当它太大时，它只会下降一行。在第二种解决方案中，宽度将根据屏幕尺寸进行调整，因此您可以强制每行 2、3、4 或 5 个 li。研究此代码并根据您的需要进行调整。为了更好地理解使用此 jsfiddle 调整浏览器窗口的大小:http://jsfiddle.net/g7xokjk0/1/

.gallery {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.gallery:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.gallery li {
  float: left;
  width: 48%;
  margin: 0 1% 20px .5%;
}
.gallery img {
  max-width: 100%;
  height: auto;
}
figure {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 30em) {
  .gallery li {
    width: 30%;
  }
}
@media only screen and (min-width: 40em) {
  .gallery li {
    width: 22%;
  }
}
@media only screen and (min-width: 50em) {
  .gallery li {
    width: 17%;
  }
}

<ul class="gallery">
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placehold.it/500x500">
      <figcaption>Some text</figcaption>
    </figure>
  </li>
</ul>