如何找到圖像的中心，並在其上放置另一個圖像？

Question

HTML：

<img src="img/image1.jpg" id = "image1" style="width: 100%;" allign = "center">

JavaScript的：

var image1 = document.getElementById("image1");

我如何獲得這個給定圖像的中心，然后放置另一個絕對位置在其死點上方的圖像？

Answer 1

您可以在圖像上使用getBoundingClientRect()來查找它們的確切位置並使用這些值進行計算。 此方法將考慮CSS大小以及滾動位置等。

第二個圖像使用固定位置放置在下面，用於演示，但您可以使用父div設置為相對，並使用絕對值將圖像放在其中。

例

 function centerImages() { var image1 = document.getElementById("image1"); var rect1 = image1.getBoundingClientRect(); var cx = rect1.left + rect1.width * 0.5; // find center of first image var cy = rect1.top + rect1.height * 0.5; var image2 = document.getElementById("image2"); var rect2 = image2.getBoundingClientRect(); var x = cx - rect2.width * 0.5; // use center of first, subtract second var y = cy - rect2.height * 0.5; image2.style.cssText = "position:fixed;left:" + x + "px; top:" + y + "px"; } window.onload = window.onresize = window.onscroll = centerImages; 

 <img src="http://i.stack.imgur.com/UDTPI.gif" id="image1" style="width: 100%;"> <img src="http://i.stack.imgur.com/fk5Js.gif" id="image2"> 

Answer 2

http://jsfiddle.net/33ra14az/1/這是我提出的使用JS + resize事件進行響應的方式。

function setImg() {
var img1 = document.getElementById('image1'),
    img2 = document.getElementById('image2'),
    offtop = ((img1.offsetHeight/2)-(img2.offsetHeight/2)),
    offleft = ((img1.offsetWidth/2)-(img2.offsetWidth/2));
    img2.style.top = offtop + "px";
    img2.style.left = offleft + "px";
}
window.load = setImg();
window.addEventListener('resize',setImg);

Answer 3

你可以嘗試這個：

$(document).ready(function() {

    var top=($("#image1").height()/2)-($("#image2").height()/2);
    var left=($("#image1").width()/2)-($("#image2").width()/2);
    $("#image2").css('left',left+'px');
    $("#image2").css('top',top+'px');
});

而css很簡單：

#image2{
    position: absolute;
    display:block;
    width:100px;
    height:100px;
}

這是html代碼：

<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" id = "image1" style="width: 100%;" allign = "center">
    <img src="http://www.hakandemirel.com.tr/blog/wp-content/uploads/jsfiddle.png" id ="image2">

這是演示： http ： //jsfiddle.net/yysdged6/22/