Html 在一个分区的正方形中平铺9幅图像。。。现在的方式？

我尝试在3x3网格中显示9个正方形图像。我希望能够拉伸整个3x3正方形的边界框，从而拉伸每个瓷砖

我的解决方案将涉及到桌子——我想这是当今人们所回避的？在现代和当代浏览器中，什么是正确的方法

---

请客气一点-上次我做前端开发时，桌子很流行，而且还不完全是Y2K。

类似的东西？将图像放入框中，并更改容器的总体大小。（它不会自动安装，您需要自己设置容器的大小）我只是想把这个放在这里，因为我相信您可以使用它

HTML:

<div id="box">
    <div class="row">
        <div class="boxes">Box 1</div>
        <div class="boxes">Box 2</div>
        <div class="boxes">Box 3</div>
    </div>
    <div class="row">
        <div class="boxes">Box 4</div>
        <div class="boxes">Box 5</div>
        <div class="boxes">Box 6</div>
    </div>
    <div class="row">
        <div class="boxes">Box 7</div>
        <div class="boxes">Box 8</div>
        <div class="boxes">Box 9</div>
    </div>
</div>

#box {
    width: 400px;
    height: 400px;
    border: #000000 solid 1px;
}
.boxes {
    width: 100%;
    height: 100%; 
    border: #000000 solid 1px;
    float: left;
    text-align: center;
}
.row {
    width: 33.3%;
    height: 33%;    
    float: left;
}

---

对于尺寸使用

%

，对于图像使用

浮动：

img {
    display: block;
    float: left; 
    width: 33.3%;
    height: 33.3%; 
}

检查：
这里是一个3x3流体方块的示例。当高度或宽度更改时，该值会更改

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

和一个工作


根据danrhul的建议，使用
进行工作。我确实说过，更改整体宽度和高度。我猜所有的图像都将匹配宽度和高度。嗯，那么使用行方法，有没有一种方法可以在不设置容器像素大小的情况下自动调整？（参见上面的解决方案）我建议使用带有9个
元素的，将每个元素的宽度设置为33%。可能的解决方案：使用带有9个
元素的
并为ul提供以下css规则：
列：3-webkit栏目：3个-moz列：3列
我认为这是三种解决方案中最好的一种，但是你应该使用
或者不要使用divsThanks作为建议，我在
填充底部的基础上放了第二个工作演示：我缺少的是30%——但不确定这有什么作用。。但是，即使设置宽度：33%似乎也会把事情搞砸，或者忽略了填充底部。我在所有尺寸的
1%
上都有
边距，这就是为什么我将
.square width设置为30%
，所以当你设置
33%
时，它不会把事情搞砸。。
html, body{
    width:100%; 
    width:100%; 
    margin:0; 
    padding:0;
}

#container {
    width:100%; 
    height:100%;
}
.square{ 
    border:1px solid #000;         
    padding-bottom: 30%; 
    height: 0;
    width:30%; 
    margin:1%; 
    float:left; 
    display:block;
}