div HTML中的较小元素

Question

我的div中有很多图像，我将它们定位在一起，这样所有图像都是完整的。 此外，我需要当我将div复制到其他页面时，图像风格相同，但我可以模拟在我的页面中放置div的位置 现在我的问题是： 我希望div中的这些entires图像更小，并且仍然相互完整 我的代码示例：

    <div style="position:absolute; top:900px; left:500px" >
      <img id="Burimi" style="position:absolute; left:10px" src="Images/Reagion/Burimi-B.png"/>
        <img id=""  style="position:relative; left:98px;top:1px;" src="Images/Reagion/N Batinah-B.png" />

      </div>

示例：

Answer 1

您可以调整容器大小而不是图像大小。例如，您可以将以下内容用于父div：

div {
transform: scale(.5,.5); /*Half width and height */
-ms-transform: scale(.5,.5); /* IE 9 */
-webkit-transform: scale(.5,.5); /* Safari and Chrome */
-o-transform: scale(.5,.5); /* Opera */
-moz-transform: scale(.5,.5); /* Firefox */
} 

Answer 2

听起来你最好使用image map。让一个图像包含您希望它们显示在页面上的所有图像，然后使用areas来区分图像上的不同区域。

Answer 3

在position:relative中使用div，在所有图片中使用position:absolute。

通过这种方式，您可以将div放在任何位置，图像将始终相对于div

定位