基于该图像坐标将图像放置在另一图像上
我需要创建一个角度为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>
相关文章