响应式小图像集

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>