使用HTML，CSS和JavaScript的图像中的图像

Question

我用HTML创建了一个常规图像。 然后，通过JavaScript动态地在初始图像中添加了图像。 但是，我遇到一个问题，即如果用户要放大或缩小，则内部图像不会停留在同一位置。 用户有可能随时放大我的情况，而我确实需要内部图像不动。 我没有任何花哨的东西，我正在尝试各种各样的方法来使它起作用，因此，如果您有使用HTML和CSS的方法，则可以将其添加到我的代码中，因为我尝试了许多不同的途径并进行了更改我的HTML大约多次。 但是，如果您想深入了解我的代码，很高兴为您提供。 非常感谢您的帮助，或者如果您只需要更多说明，我也可以这样做，谢谢。

这是将图像添加到图像的代码示例，并且存在我在上面解释的问题：

 $(document).ready(function() { $('#myImgId').click(function(e) { var offX = event.clientX; var offY = event.clientY; margin = 20; if (offX > margin) offX -= margin; if (offY > margin) offY -= margin; var signHereImage = document.createElement("img"); signHereImage.setAttribute('src', 'imageInserted.jpg'); signHereImage.setAttribute('class', 'overlays'); signHereImage.style.left = offX + "px"; signHereImage.style.top = offY + "px"; document.body.appendChild(signHereImage); }); }); 

 <form id="form1" runat="server"> <div> <img src="page3.jpg" alt="PDF Image" id="myImgId" /> </div> </form> 

这在大多数情况下是什么，我知道我做错了什么，我只是不确定，请再次感谢。

Answer 1

我将使用background-image属性来实现这一点。 您可以将图像放置在div中，为该div提供背景图像，然后相对于div放置图像。 这是一个工作示例：

 div { position: relative; height: 500px; background-image: url(https://images.unsplash.com/photo-1413781892741-08a142b23dfe?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=); background-size: cover; } img { position: absolute; margin: auto; top: 0; bottom: 0; right: 0; left: 0; width: 200px; } 

 <div> <img alt="img" src="https://images.unsplash.com/photo-1483086431886-3590a88317fe?dpr=2&auto=format&fit=crop&w=1500&h=2247&q=80&cs=tinysrgb&crop=&bg=" /> </div> 

Answer 2

考虑当用户放大或缩小网页时会发生什么变化。 视口大小会相对于页面上的内容发生变化。

您可能正在根据与视口相关的内容来设计内部图像的样式。 如果其他约束不可用，则根据视口的宽度计算块元素的自动宽度。 例如，具有以下CSS属性的元素在视口的右边缘移动：

position: absolute;
right: 20px;

观看演示 。

默认情况下，其他元素（可能包括您的外部图像）从左上方开始逐行排列。 这种差异会导致页面的某些元素在缩放或调整窗口大小时相对于其他元素移动。

查看如何指示浏览器布置这两个图像，并确保（如果它们取决于视口的大小）是否以相同的方式依赖于它们。