Question

假设您要显示4张相同方形尺寸的图像，占宽度的25％。当使窗口变小时，将它们缩小到最小宽度：200px;

但是，如果做得更小，请将第三张和第四张图像放在theese的前两张图像下面，让每张图像占据50％的空间。 theese可以再缩小到最小宽度：200px;

如果再次缩小200px以上，那么它会显示1张图像，每张图片的宽度为100％，低于最后一张图像？

现在我看到并玩了几乎我想要的东西，但是不能在那里得到它。有什么帮助吗？

theese是风格

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:25%;
    float:left;
    min-width:200px;
}

.column img {
    width:100%;
    height:auto;
}

这是html

<div class="container">
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
</div>

https://jsfiddle.net/au53h9jg/

Answer 1

使用媒体查询来实现此目的，此处已更新fiddle。

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:33.33333333%;
    float:left;
    min-width:200px;
}

.column img {
    width:100%;
    height:auto;
}
@media only screen and (max-width: 600px) {
  .column {
    width:50%;
    float:left;
    min-width:200px;
}
  
}
@media only screen and (max-width:400px) {
  .column {
    width:100%;
    float:left;
    min-width:200px;
}
  
}

<div class="container">
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
</div>

当缩小尺寸小于它的最小宽度时，如何使4个div动态地获得25/50/100％？

1 个答案: