根据浏览器窗口大小灵活调整所有图像的大小

Question

我正在迭代我的所有图像，并将它们简单地显示如下：

<div class="big-container">
    <!--for every image-->
    <div class="image-container">
        <img class="image" src="url">
    </div>
    <!-- end of iteration -->
</div>

使用同样简单的css解决方案：

.image-container {
    display: inline-block;
    max-width: 312px;
    height: auto;

    img.image {
        max-width: 100%;
    }
}

但是，当用户调整窗口大小时，我想调整所有图像的大小。因此，随着窗口的每一个像素的缩小，图像都会缩小一些。这样，当窗口真的很窄时(比如移动)，的图像不会一个接一个地出现在页面上，而是显示在二乘二的位置上。现在不会调整大小，除非窗口太小，以至于无法显示一幅图像。

有没有一种使用CSS (nth-child)的方法？或者JavaScript可以在不给浏览器带来太大压力的情况下流畅地实现这一目标？我听说浏览器中的大小调整不是它应该做的事情。

Answer 1

尝试使用一组媒体查询并进行计算，看看它是否有帮助。我使用容器上的font-size: 0;技巧来删除内联块之间的空白。

https://jsfiddle.net/Lnxd0yra/2/

​

body {
  margin: 0;
}
.container {
  font-size: 0;
}
.item {
  font-size: 16px;
  display: inline-block;
  width: 312px;
}
.item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1248px) { /*312x4*/
  .item {
    width: 25%;
  }
}
@media (max-width: 936px) { /*312x3*/
  .item {
    width: 33.3333%;
  }
}
@media (max-width: 624px) { /*312x2*/
  .item {
    width: 50%;
  }
}
@media (max-width: 312px) { /*312x1*/
  .item {
    width: 100%;
  }
}

<div class="container">
  <div class="item"><img src="https://unsplash.it/200"></div>
  <div class="item"><img src="https://unsplash.it/200"></div>
  <div class="item"><img src="https://unsplash.it/200"></div>
  <div class="item"><img src="https://unsplash.it/200"></div>
  <div class="item"><img src="https://unsplash.it/200"></div>
  <div class="item"><img src="https://unsplash.it/200"></div>
</div>

​