3

我的网页上有 9 张 3x3 网格形状的图像。目前，当我在宽屏笔记本电脑上查看时，它看起来不错，但是当我在较小的设备上查看时，图像会堆叠在一起，因为它是响应式的。我希望图像一起缩小（并保持在它们的 3x3 网格中）而不是堆叠。我什至不知道从哪里开始。
提前致谢！

抱歉，代码不多。我的部分是 940 像素宽，每个图像是 300 像素宽和高。

<section id="picture">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
<img src="8.jpg">
</section>
4

2 回答 2

3

最好的方法是使用display:inline-block,max-widths和百分比

演示http://jsfiddle.net/kevinPHPkevin/Ptqde/

section {
    max-width:300px;
}
img {
    max-width:80px;
    display:inline-block;
    width:30%;
}
于 2013-05-31T21:38:29.610 回答
-1

我已经制作了一个如何实现这个的示例。

HTML 代码是一个简单的无序列表，其中包含 9 个空li元素ul。CSS 是在其固定大小的父级中基于百分比的一组规则：

li {
    width:33%;
    height:33%;
    top:33%;
    list-style:none;
    position:absolute;
}
li:nth-child(-n+3) {
    top:0;
}
li:nth-child(n+7) {
    top:66%;
}
li:nth-child(3n+2) {
    left:33%;
}
li:nth-child(3n+3) {
    left:66%;
}

在我的示例中，我使用固定背景background-size:cover将图像放在那里 - 它不言自明，您可以在li元素中放置任何东西，因为这种方法确保它们始终具有正确的大小。

于 2013-05-31T21:34:45.437 回答