基于该图像坐标将图像放置在另一图像上

沃梦达教程前端问题

2022-01-01

Place images over another based on that image coordinates(基于该图像坐标将图像放置在另一图像上)

本文介绍了基于该图像坐标将图像放置在另一图像上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要创建一个角度为8的组件，该组件包含用作地图的大图像，并基于该图像坐标将动态较小的图像放置在前者上。例如：我在背景中有一张房间图像。从服务器上我知道我的椅子图像是20x20像素，它应该放置在相对于房间图像的120x 300y的中心位置。

我如何才能做到这一点？我试着使用一些css技巧，比如将较大的div包装在相对定位的div中，较小的将绝对div设置为NgStyle，但它只将其设置为0.0

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

推荐答案

如果我正确理解了您的问题，只需将您的椅子图像相对于背景图像放置即可。我会将您的背景包装在一个容器中，该容器将是任何其他绝对内部元素的相对容器。

类似的内容：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

这篇关于基于该图像坐标将图像放置在另一图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：基于该图像坐标将图像放置在另一图像上