使用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的圖像內的圖像

回答

相關問題