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

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

这里是增加了一个图像的图像代码的一个例子，有我在上面解释的问题：

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

这是在大多数情况下它是什么，我知道我正在做一些不正确的事情，我只是不知道确切的事情，再次感谢提前。

来源

2017-04-07 wrikgee

请添加你的代码，就足以复制问题也期望输出的一些图片，如果你能肯定 – DaniP

，给我几个。 – wrikgee

下面是一个简单的例子： – wrikgee

我会使用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>

来源

2017-04-07 20:20:02

谢谢H.T.对于快速反应，它看起来像一个很好的答案。我会在星期一尝试它，因为我的一天终于是卵子！我不认为我会如此迅速地得到回应。 – wrikgee

酷！祝你好运！ –

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

您可能根据与视口相关的事物来设计内部图像。如果其他约束条件不可用，块元素的自动宽度将根据视口的宽度进行计算。例如，用下面的CSS特性的元件移动与周围的视口的右边缘：

position: absolute; 
right: 20px;

看到一个demo。

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

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

来源

2017-04-07 20:19:45 guest

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

回答

相关问题