javascript - 根据浏览器窗口大小流畅地调整所有图像的大小

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; 技巧来删除内联 block 之间的空白区域。

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>