每隔一段时间缩放浮动div

Question

我想制作一个带有浮动 divs 的网页，要求如下：

divs先水平堆叠，再垂直堆叠。
divs 始终填满屏幕。
水平行上 divs 的数量在特定时间间隔变化

示例场景：当屏幕宽度为 100px 时：divs 的垂直堆栈，大小为 100px x 100px。当屏幕宽度为 200px 时：每行有 2 个 divs 大小 100px x 100px 的堆栈。屏幕宽度介于 100px and 200px 之间：divs 自动缩放以填满整个屏幕，每行保留 2 divs。

我已经尝试过尝试满足这些要求，但我还没有破解解决方案。这是我到目前为止所拥有的。问题主要出在缩放部分。

<div class="container">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
</div>

CSS代码：

.container {
    width: 100%;
}

.image {
    display: inline-block;
    float: left;
    margin-left: 10px;
}

img {
  width: 100px;
  height: 100px;
}


@media (max-width: 100px) {
.image {
   width:10%   
  }
}

@media (min-width:101px) and (max-width: 200px){
    .image {
   width:20%
  }
}

Answer 1

虽然 100px 和 200px 的视图非常小，但经过一些更改，这可能就是您要找的。

片段

.container {
  width: 100%;
}
.image {
  float: left;
  margin-left: 1%;
}
img {
  max-width: 100%;
  height:auto;
}

@media (min-width: 101px) and (max-width: 200px) {
  .image {
    max-width: 49%
  }
}
@media (max-width: 100px) {
  .image  {
    float:none;
    max-width:100%
  }

<div class="container">
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
  <div class="image">
    <img src="http://placekitten.com/105/105" />
  </div>
</div>

每隔一段时间缩放浮动div

scale floating divs at intervals

html

css

css-float

片段