Position div over particular region of variable height image

Question

I'm working to position a div over a variable height image and am wondering how best to approach this situation. In the following example, for instance, I'm trying to position the red square over the Registered trademark symbol in the image: Fiddle.

My HTML/CSS looks like this:

<img src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg" class="background">
<div class="overlay"></div>

.background {
  height: 100%;
  position: absolute;
  margin-top: -61px;
}

.overlay {
  position: absolute;
  height: 20px;
  width: 20px;
  background: red;
}

And I'm positioning the red div over the image with the following JS:

var resizeOverlay = function() {
  var windowHeight = $(window).height();

  var left = windowHeight * 1.07;
  var bottom = (windowHeight * .63) + 61;

  $(".overlay").css({
    "left": left,
    "bottom": bottom
  });
};

$(document).ready(resizeOverlay);
$(window).resize(resizeOverlay);

The results are not ideal, because I'm just building two linear models to calculate the x and y offsets. How would others approach this task?

Answer 1

This can be achieved with CSS and a few changes to your markup

The image in your example is scaled in relation to the height of the viewport - the height is always 100% and the width is calculated on the fly by the browser to keep the aspect ratio.

To position the overlay the same scaling will need to apply. To do this a container can be added which will fit the viewport height and scale to the width of the image, this will then allow for the overlay to be positioned relatively to it and scale in proportion to the image.

The following modifications are required:

• Wrap .background and .overlay in a container (called #container in this instance)
• Set #container with the following properties:
  • height: 100vh; - This will make it fill the entire viewport height
  • margin-top: -61px; - Carried over from your example
  • position: relative; - To ensure that .overlay is positioned in relation to this container
  • width: 570vh; - This will ensure that the container scales at the same rate as the image. This is calculated by finding the aspect ratio of your existing image - 1140 x 200 is an aspect ratio of 57 : 10 so 200(px) * 5.7 = 1140(px) translates to 100(vh) * 5.7 = 570(vh)
• Set .background with the following properties:
  • height: 100%; - To ensure it resizes in a similar manner to your example, it will fill the entire height of the viewport. The width will scale in relation to this
• Set .overlay with the following properties:
  • background: red; - Carried over from your example
  • height: 6vh; - As the image is scaled in relation to the viewport height this will ensure that the overlay scales at the same rate
  • left: 18.3%; - Positions the overlay at the designated area over the registered symbol
  • position: absolute; - Positions the overlay relative to the container
  • top: 29%; - Positions the overlay at the designated area over the registered symbol
  • width: 6vh; - As the image is scaled in relation to the viewport height this will ensure that the overlay scales at the same rate

$(".overlay").click(function() {
  alert("Clicked")
});

#container {
  height: 100vh;
  margin-top: -61px;
  position: relative;
  width: 570vh;
}
.background {
  height: 100%;
}
.overlay {
  background: red;
  height: 6vh;
  left: 18.3%;
  position: absolute;
  top: 29%;
  width: 6vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img alt="" class="background" src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg">
  <div class="overlay"></div>
</div>

JS Fiddle - Change the result window height and the overlay should re-position accordingly.

Answer 2

Walking home yesterday I realized this problem is actually very simple.

The image's proportions are constant, and the overlay has two values: x-position and y-position. The x-position is just some fraction of the image width, and the y-position is some fraction of the image height.

So one can represent the overlay's position using two float values {0,1}: one for the overlay's position on the x axis and the other for the y axis. Then just multiply those values by the image's width and height (respectively) to find the appropriate x,y positions for the overlay.

To get the overlay to stay constantly positioned over the point of interest (i.e. {0:max-image-x},{0:max-image-y} ) one just needs to subtract half the width of the overlay div from the x,y position calculated.