CODEWITHSUNDEEP
javascripthtmlcss
wrikgee
wrikgee

Reputation: 59

Image within an Image using HTML, CSS and JavaScript

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.

Upvotes: 2

Views: 192

Answers (2)

guest
guest

Reputation: 6698

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.

Upvotes: 1

Hudson Taylor
Hudson Taylor

Reputation: 1162

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>

Upvotes: 2

Related Questions