在HTML&；格式的3x3网格中，9幅图像收缩在一起；CSS？

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

抱歉，代码没有太多内容。我的部分是940px宽，每个图像是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>

我已经准备好了

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%;
}

---

在我的示例中，我使用带有

背景大小：cover

的固定背景将图像放在那里-这本身就说明您可以在

li

元素中放置任何内容，因为这种方法确保它们始终具有正确的大小。

最好的方法是使用

显示：内联块

，

最大宽度

和百分比

演示

---

您需要发布您的现有代码，以便我们中的任何人了解如何纠正您遇到的问题。确保包含相关的CSS和HTML。谢谢从头开始：你的图片是基于百分比的吗？应该是。谷歌搜索“流体网格”或“柔性网格”之类的例子。我看到你添加了HTML，但是CSS呢？CSS将成为这里的驱动因素。谢谢！这很有效。出于某种原因，我的手机在达到手机尺寸时仍会破裂，但它适用于平板电脑，这一点最为重要。理论上，它的尺寸将降至0。如果它坏了，那是由于html或CSS中的另一个元素破坏了事情。很乐意帮忙。

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