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

但是，当用户调整窗口大小时，我想流畅地调整所有图像的大小。因此，对于窗口正在缩小的每个像素，图像都应该缩小一些量。这样，当窗口非常狭窄时（如移动设备），图像不会在页面上逐个显示，而是显示为2×2。现在他们不会调整大小，直到窗口太小而无法显示一个图像。

有没有办法使用CSS（nth-child？）或JavaScript来流畅地实现这一点而不会对浏览器造成太大压力？我听说浏览器中的调整大小不是应该的。

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: