javascript - How do I find the center of an image, and place another image on top of it? - Stack Overflow

admin管理员组

文章数量:1277398

HTML:

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

JavaScript:

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

How would I get the center of this given image, and then place another image which has an absolute position on top of it dead center?

HTML:

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

JavaScript:

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

How would I get the center of this given image, and then place another image which has an absolute position on top of it dead center?

• javascript
• html
• cordova

Share Improve this question Follow edited May 3, 2015 at 7:14 Zee 8,48855 gold badges3838 silver badges5959 bronze badges asked May 3, 2015 at 6:21 daniel metlitskidaniel metlitski 78733 gold badges1212 silver badges2525 bronze badges 1

• Do you mean an image that has a position of center or an image that has the same center? – jdphenix Commented May 3, 2015 at 6:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use getBoundingClientRect() on the images to find their exact position and calculate using those values. This method will take into consideration the CSS size as well as scroll position etc.

The second image is placed below using fixed position, for demo, but you can use a parent div set to relative and place the image inside that using absolute etc.

Example

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="https://i.sstatic/UDTPI.gif" id="image1" style="width: 100%;">
<img src="https://i.sstatic/fk5Js.gif" id="image2">

http://jsfiddle/33ra14az/1/ here's a way I came up with using JS + resize event for responsive.

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

well you can try this :

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

and the css is simple:

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

and this is the html code:

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

this is demo: http://jsfiddle/yysdged6/22/

本文标签：