HTML/CSS图像网格

Question

我是一名后端开发人员,我需要一些HTML/CSS帮助来替换一个带有多个小图像的大图像.较小的图像应占据与较大图像完全相同的区域.这是我现在用于放大图像的HTML:

<table border="0" cellspacing="0" cellpadding="0" width="300">
    <tr>
        <td>
            <img src="myimage.jpg" width= "300" height="190" border="0">
        </td>
   </tr>
</table>

所以上面的工作非常适合显示我的大图像.现在我想用一些div替换img标签,我认为？和一些CSS,这样我就可以在x和y位置放置小图像,这样拼接在一起时就会占用与大图像相同的300x190.

例如,如果我假设左上角是0,那么当我向右移动时x和x增加,当我向下移动时y增加,并且我使用左上角的x,y放置我的图像.然后我可以拍摄两张150x190的图像,将第一张放在0,0,第二张放在150,0.

什么是最好的HTML/CSS？

编辑:我需要在任意意义上处理这个问题.因此,有一些小图像都有自己的x,y,而不是上面的简单示例.

Answer 1

使用absolute内部relative定位.

请参阅: http ://css-tricks.com/absolute-positioning-inside-relative-positioning/

请参阅: http ://jsfiddle.net/zwwwt/

内在的divs可以很容易img.

<div class="imageContainer">
    <div style="top: 0; left: 0; width: 100px; height: 50px"></div>
    <div style="top: 0; left: 100px; width: 200px; height: 50px"></div>
    <div style="top: 50px; left: 0; width: 150px; height: 150px"></div>
    <div style="top: 50px; left: 150px; width: 150px; height: 150px"></div>
</div>

.imageContainer {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid red
}
.imageContainer div {
    position: absolute;
    background: #ccc;
    outline: 1px dashed #000
}

Answer 2

如果您已经使用了表格,为什么不添加更多行/列来创建2x2网格并在其中输入每个图像.这将是最快的解决方案.

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="myimage1.jpg" width= "150"  border="0"></td>
    <td><img src="myimage2.jpg" width= "150"  border="0"></td>
  </tr>
  <tr>
    <td><img src="myimage3.jpg" width= "150"  border="0"></td>
    <td><img src="myimage4.jpg" width= "150"  border="0"></td>
  </tr>
</table>