html - 9 张图像在 HTML 和 CSS 中缩小到 3x3 网格中？

Question

我的网页上有 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>

Answer 1

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

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

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