9张图像在HTML和CSS的3x3网格中一起收缩？

我的网页上有9张3x3网格图像。目前在我的宽屏笔记本电脑上观看时看起来很好，但是当我在较小的设备上观看时，图像彼此堆叠在一起，因为它具有响应能力。我希望图像一起缩小（并保留在他们的3x3网格中）而不是堆叠。我甚至不知道从哪里开始。
在此先感谢！9张图像在HTML和CSS的3x3网格中一起收缩？

对不起，没有太多的代码。我的部分宽940像素，每幅图像宽300px。

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

来源

2013-05-31 Kobaine

您需要发布您的现有代码我们任何人弄清楚如何纠正您遇到的问题。确保包含相关的CSS和HTML。谢谢！ –

我看到你已经添加了你的HTML，但你的CSS呢？ CSS将成为这里的推动因素。 –

从开始处开始：http://alistapart.com/article/responsive-web-design您的图像百分比是基于什么？他们应该是。 Google针对诸如“流动网格”或“灵活网格”之类的内容提供了一些示例。 – Bart

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

DEMO http://jsfiddle.net/kevinPHPkevin/Ptqde/

section { 
    max-width:300px; 
} 
img { 
    max-width:80px; 
    display:inline-block; 
    width:30%; 
}

来源

2013-05-31 21:38:29 Vector

谢谢！这很好。出于某种原因，当手机尺寸达到手机尺寸时，我的手机仍然会断线，但对于最重要的平板电脑来说，它仍然有效 – Kobaine

这在理论上会下降到0。如果它打破了它是由于你的HTML或CSS中的其他元素造成干扰。乐意效劳。 – Vector

-1

我掀起了a sample of how to implement this。

该HTML代码是一个简单的无序列表，在ul内有9个空的li元素。 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-31 21:34:45

9张图像在HTML和CSS的3x3网格中一起收缩？

回答

相关问题