Question

我想制作六个大小相同的图像，分成两行3，然后在屏幕尺寸变化时叠加。我得到3 x 2堆叠，但它不会响应。我也想让它触摸窗户的边缘。

继承人的HTML代码：

<div class='container'>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
    <a href="URL"><img src="images/photos/placeholder.jpg" style="float: left; width: 33.3%; margin: 0px;" ></a>
</div>

我希望它看起来像这样：

https://drive.google.com/file/d/0ByScraIkl4P9TUYzWm9vbDE0N1U/view?usp=sharing

一旦屏幕尺寸下降，我希望将它们叠在一起。

请帮助!!

Answer 1

查看媒体查询。这样您就可以根据屏幕尺寸调整样式。当然你可以自己写一切，但我建议你看一下 bootstrap 。

样品：

/* extra small devices, phones */
@media (min-width: 320px) {
    .container a img { width: 100%; float:none; }
}
/* small devices, tablets */
@media (min-width: 700px) {
    .container a img { width: 50%; float: left; }
}

使用此css图像将采用100％或50％宽度。 Bootstrap提供了不同屏幕尺寸的类，可用于定义元素如何响应，显示/隐藏等。您甚至可以对元素进行重新排序。剥去你不需要的零件，而不是重新发明轮子。

祝你好运！

Answer 2

这样的事情怎么样？图像的宽度为33％（因此3将适合），直到屏幕尺寸下降并且设置为100％。

<div class='container'>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a>
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
<a href="URL"><img src="images/photos/placeholder.jpg" ></a> 
</div>

.container img {
    width: 33%;
    float: left;
    margin: 0;
}
@media (max-width: 400px) {
    .container img {
        width: 100%;
        float: none;
    }
}

https://jsfiddle.net/lemoncurry/5zeLxbnt/

如何让这些图像以他们需要的方式响应？

2 个答案: