Question

我用HTML创建了一个常规图像。然后，通过JavaScript动态地，我在初始图像中添加了一个图像。但是，我遇到的问题是，如果用户放大或缩小，内部图像不会停留在同一个位置。而且用户可以随时放大我的情况，我真的需要内部图像不要移动。我没有任何想象力，我正在尝试各种方法来实现这一点，所以如果你有一种使用HTML和CSS的方法，我可以将它添加到我的代码中，因为我尝试了很多不同的途径并且改变了我的HTML多次出现。但是，如果您想深入了解我的代码，我很乐意为您提供。非常感谢任何帮助，或者如果您只是需要更多说明，我也可以提前做到这一点，谢谢。

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

＆＃13;

$(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);

  });
});

＆＃13;

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

＆＃13;

这在很大程度上是什么，我知道我做错了什么，我只是不知道什么是肯定的，再次提前感谢。

Answer 1

我会使用background-image属性来实现这一目标。您可以将图像放在div中，为该div提供背景图像，然后相对于div定位图像。这是一个有效的例子：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

考虑用户放大或缩小网页时的更改。视口大小相对于页面上的内容更改。

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

position: absolute;
right: 20px;

查看demo。

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

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

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

2 个答案: