使用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;

觀看演示 。

默認情況下，其他元素（可能包括您的外部圖像）從左上方開始逐行排列。 這種差異會導致頁面的某些元素在縮放或調整窗口大小時相對於其他元素移動。

查看如何指示瀏覽器布置這兩個圖像，並確保（如果它們取決於視口的大小）是否以相同的方式依賴於它們。