html - 每隔一段时间缩放 float div

Question

我想制作一个带有 float div 的网页，并满足以下要求:

• div 首先水平堆叠，然后垂直堆叠。
• div 始终填满屏幕。
• 水平行上的 div 数量在特定时间间隔发生变化

示例场景: 当屏幕宽度为 100px 时:divs 的垂直堆栈，大小为 100px x 100px。当屏幕宽度为 200px 时:每行有 2 个大小为 100px x 100px 的 divs 的堆栈。 100px 和 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 的 View 非常小。

片段

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