Image within an Image using HTML, CSS and JavaScript

Question

I created a regular image in HTML. Then, dynamically via JavaScript, I added an image within the initial image. However, I am having an issue where if a user were to zoom in or out, the internal image does not stay in the same place. And it is possible that a user could zoom in my case, anytime, and I really need the internal image not to move. I do not have anything fancy, and I am trying all sorts of ways to get this to work, so if you have a way that uses HTML and CSS, I could add it to my code, because I have tried many different avenues and changed my HTML around multiple times. However, if you would like my code, in depth, I would be glad to supply it with you. Any help is greatly appreciated, or if you simply need more clarification, I can do that as well, thanks in advance.

Here is an example of the code that adds an image to an image, and has the issue that I explained above:

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

This is for the most part what it is, I know that I am doing something incorrectly, I just do not know what for certain, thanks again in advance.

Please add your code, just enough to replicate the issue also some images of the desired output if you can — DaniP
– DaniP, Commented Apr 7, 2017 at 20:12
Thx DaniP, I realized that right after I accidentally almost included it in here. As you can see, I haven't utilized stack o' flow too much in my career, it's my own folly. — wrikgee
– wrikgee, Commented Apr 7, 2017 at 20:58

Hudson Taylor · Accepted Answer · 2017-04-07 20:20:02Z

2

I would use the background-image property to achieve this. You can place the image in a div, give that div a background image, and then position the image relative to the div. Here's a working example:

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>

answered Apr 7, 2017 at 20:20

Hudson Taylor

1,1722 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wrikgee Over a year ago

Thanks H.T. for the rapid response and it looks like a great answer. I will try it on Monday, as my day is finally ova!! I didn't think that I would get responses so quickly.

Hudson Taylor Over a year ago

Cool! Good luck!

guest · Accepted Answer · 2017-04-07 20:24:47Z

Consider what changes when a user zooms in or out on a web page. The viewport size changes, relative to the content on the page.

You are probably styling the internal image based on something related to the viewport. The automatic width of block elements is calculated from the width of the viewport if other constraints are not available. For example, an element with the following CSS properties moves around with the right edge of the viewport:

position: absolute;
right: 20px;

See a demo.

Other elements, perhaps including the external image of yours, are by default laid out line-by-line, starting from the top left. This discrepancy can cause some elements of the page to move with respect to others when zooming or resizing the window.

Review how you instruct the browser to lay out these two images, and make sure that, if they depend on the size of the viewport, they depend on it in the same way.

Collectives™ on Stack Overflow

Image within an Image using HTML, CSS and JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related