Question

我需要创建一个Angular 8组件，该组件可容纳用作地图的大图像，并根据该图像坐标将较小的图像动态放置在前者上。例如：我在背景中有一个房间图像。从服务器上我知道我的椅子图像是20x20像素，应该相对于房间图像以120x 300y居中放置。

我该如何实现？我试图使用一些css技巧，例如将较大的一个包装在相对定位的div内，而较小的则通过NgStyle为其样式设置了绝对divs设置，但它只是将其设置为0.0

对于项目要求，我不能使用AngularMaterial。

Answer 1

如果我正确理解了您的问题，仅要将椅子图像相对于背景图像就足够了。我会将您的背景包裹在一个容器中，该容器将是其他绝对内部元素的相对容器。

类似的东西：

.room-container {
  position: relative;
}

.chair {
  position: absolute;
  
  top: 400px;
  left: 400px;
}

<div class="room-container">
  <!-- BG Image-->
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Hotel-suite-living-room.jpg" alt="">
    
  <!-- Chair image -->
  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG" alt="" class="chair">
</div>

根据该图像坐标将图像放置在另一个图像上

1 个答案: