Scale element proportional to Background Cover with jQuery

Question

I have a tricky question: I have a fullsize background over the site I'm working on. Now I want to attach a div to a certain position on the image and also that the div scales in the same way the my background image with the "background-size: cover" property does. So in this example, I have a picture of a city, which covers the browser window and I want my div to overlay one particular building, no matter of the window size.

I already managed to make the div sticking to one position, but cant make it resize properly. What I did so far:

http://codepen.io/EmmieBln/pen/YqWaYZ

var imageWidth = 1920,     imageHeight = 1368,     imageAspectRatio = imageWidth / imageHeight,     $window = $(window);  var hotSpots = [{     'x': -160,     'y': -20,     'height': 400,     'width': 300 }];  function appendHotSpots() {     for (var i = 0; i < hotSpots.length; i++) {         var $hotSpot = $('<div>').addClass('hot-spot');         $('.container').append($hotSpot);     }     positionHotSpots(); }  function positionHotSpots() {     var windowWidth = $window.width(),         windowHeight = $window.height(),         windowAspectRatio = windowWidth / windowHeight,         $hotSpot = $('.hot-spot');      $hotSpot.each(function(index) {         var xPos = hotSpots[index]['x'],             yPos = hotSpots[index]['y'],             xSize = hotSpots[index]['width'],             ySize = hotSpots[index]['height'],             desiredLeft = 0,             desiredTop = 0;          if (windowAspectRatio > imageAspectRatio) {             yPos = (yPos / imageHeight) * 100;             xPos = (xPos / imageWidth) * 100;             xSize = (xSize / imageWidth) * 1000;             ySize = (ySize / imageHeight) * 1000;         } else {             yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;             xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;         }          $(this).css({             'margin-top': yPos + '%',             'margin-left': xPos + '%',             'width': xSize + 'px',             'height': ySize + 'px'         });      }); }  appendHotSpots(); $(window).resize(positionHotSpots); 

My idea was: If (imageWidth / windowWidth) < 1 then set Value for var Scale = (windowWidth / imageWidth) else var Scale ( windowHeight / imageHeight ) and to use the var Scale for transform: scale (Scale,Scale) but I couldnt manage to make this work…

Maybe you guys could help me out…

Answer 1

Solution for background-size:cover

I am trying to give you solution(or consider as an idea). You can check working demo here. Resize the window to see the result.

First,I didn't understand why you are using transform,top:50% and left:50%for hotspot. So I tried to solve this using minimal use-case and adjusted your markup and css for my convenience.

Here rImage is the aspect ratio of the original image.

 var imageWidth = 1920;  var imageHeight = 1368;  var h = {    x: imageWidth / 2,    y: imageHeight / 2,    height: 100,    width: 50  };  var rImage= imageWidth / imageHeight; 

In window resize handler,calculate the aspect ration of viewport r. Next,the trick is to find the dimensions of the image when we resize the window. But,viewport will clip the image to maintain aspect ratio. So to calculate the image dimensions we need some formula.

When using background-size:cover to calculate the dimensions of image,below formulas are used.

if(actual_image_aspectratio <= viewport_aspectratio)     image_width = width_of_viewport     image_height = width_ofviewport / actual_image_aspectratio  

And

if(actual_image_aspectratio > viewport_aspectratio)     image_width = height_of_viewport * actual_image_aspectratio      image_height = height_of_viewport 

You can refer this URL for more understanding on image dimensions calculation when using background-size:cover.

After getting the dimensions of the image, we need to plot the hot-spot coordinates from actual image to new image dimensions.

To fit the image in viewport image will be clipped on top & bottom / left & right of the image. So we should consider this clipped image size as an offset while plotting hotspots.

offset_top=(image_height-viewport_height)/2 offset_left=(image_width-viewport_width)/2 

add this offset values to each hotspot's x,y coordnates

var imageWidth = 1920;  var imageHeight = 1368;  var hotspots = [{    x: 100,    y: 200,    height: 100,    width: 50  }, {    x: 300,    y: 500,    height: 200,    width: 100  }, {    x: 600,    y: 600,    height: 150,    width: 100  }, {    x: 900,    y: 550,    height: 100,    width: 25  }];  var aspectRatio = imageWidth / imageHeight;    $(window).resize(function() {    positionHotSpots();  });  var positionHotSpots = function() {    $('.hotspot').remove();    var wi = 0,      hi = 0;    var r = $('#image').width() / $('#image').height();    if (aspectRatio <= r) {      wi = $('#image').width();      hi = $('#image').width() / aspectRatio;    } else {      wi = $('#image').height() * aspectRatio;      hi = $('#image').height();    }    var offsetTop = (hi - $('#image').height()) / 2;    var offsetLeft = (wi - $('#image').width()) / 2;    $.each(hotspots, function(i, h) {        var x = (wi * h.x) / imageWidth;      var y = (hi * h.y) / imageHeight;        var ww = (wi * (h.width)) / imageWidth;      var hh = (hi * (h.height)) / imageHeight;        var hotspot = $('<div>').addClass('hotspot').css({        top: y - offsetTop,        left: x - offsetLeft,        height: hh,        width: ww      });      $('body').append(hotspot);    });  };  positionHotSpots();

html,  body {    height: 100%;    padding: 0;    margin: 0;  }  #image {    height: 100%;    width: 100%;    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg');    background-size: cover;    background-repeat: no-repeat;    background-position: center;  }  .hotspot {    position: absolute;    z-index: 1;    background: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id='image'></div>

Solution for background-size:contain

When using background-size:contain to calculate the dimensions of image, below formulas are used.

if(actual_image_aspectratio <= viewport_aspectratio)     image_width = height_of_viewport * actual_image_aspectratio      image_height = height_of_viewport 

And

if(actual_image_aspectratio > viewport_aspectratio)     image_width = width_of_viewport     image_height = width_ofviewport / actual_image_aspectratio 

To fit the image in viewport additional space will be added on top & bottom / left & right of the image. So we should consider this space as an offset while plotting hotspots.

offset_top=(viewport_height-image_height)/2 offset_left=(viewport_width-image_width)/2 

Add this offset values to each hotspot's x,y coordnates

 var imageWidth = 1920;   var imageHeight = 1368;   var hotspots = [{     x: 100,     y: 200,     height: 100,     width: 50   }, {     x: 300,     y: 500,     height: 200,     width: 100   }, {     x: 600,     y: 600,     height: 150,     width: 100   }, {     x: 900,     y: 550,     height: 100,     width: 25   }];   var aspectRatio = imageWidth / imageHeight;     $(window).resize(function() {     positionHotSpots();   });   var positionHotSpots = function() {     $('.hotspot').remove();     var wi = 0,       hi = 0;       var r = $('#image').width() / $('#image').height();     if (aspectRatio <= r) {       wi = $('#image').height() * aspectRatio;       hi = $('#image').height();       } else {       wi = $('#image').width();       hi = $('#image').width() / aspectRatio;     }     var offsetTop = ($('#image').height() - hi) / 2;     var offsetLeft = ($('#image').width() - wi) / 2;     $.each(hotspots, function(i, h) {         var x = (wi * h.x) / imageWidth;       var y = (hi * h.y) / imageHeight;         var ww = (wi * (h.width)) / imageWidth;       var hh = (hi * (h.height)) / imageHeight;         var hotspot = $('<div>').addClass('hotspot').css({         top: y + offsetTop,         left: x + offsetLeft,         height: hh,         width: ww       });       $('body').append(hotspot);     });   };   positionHotSpots();

html,  body {    height: 100%;    padding: 0;    margin: 0;  }  #image {    height: 100%;    width: 100%;    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg');    background-size: contain;    background-repeat: no-repeat;    background-position: center;  }  .hotspot {    position: absolute;    z-index: 1;    background: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id='image'></div>

Solution for background-size:100% 100%

This is the solution if someone looking for background-size:100% 100% check the working demo here. Resize the window to see the result.

Here we don't need to calculate the image dimensions as the image will always fit to into the div. So we can just calculate the new coordinates of hotspot using height and width of viewport and actualimage.

var imageWidth = 1920;  var imageHeight = 1368;  var hotspots = [{    x: 100,    y: 200,    height: 100,    width: 50  }, {    x: 300,    y: 500,    height: 200,    width: 100  }, {    x: 600,    y: 600,    height: 150,    width: 100  }, {    x: 900,    y: 550,    height: 100,    width: 25  }];    $(window).resize(function() {    positionHotSpots();  });      var positionHotSpots = function() {    $('.hotspot').remove();      $.each(hotspots, function(i, h) {      var x = ($('#image').width() * h.x) / imageWidth;      var y = ($('#image').height() * h.y) / imageHeight;        var ww = ($('#image').width() * (h.width)) / imageWidth;      var hh = ($('#image').height() * (h.height)) / imageHeight;      var hotspot = $('<div>').addClass('hotspot').css({        top: y,        left: x,        height: hh,        width: ww      });      $('body').append(hotspot);    });    };  positionHotSpots();

html,  body {    height: 100%;    margin: 0;    padding: 0;  }  #image {    height: 100%;    width: 100%;    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg');    background-size: 100% 100%;  }  .hotspot {    position: absolute;    z-index: 1;    background: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id='image'></div>

Canvas solution

Based on comment by @JayMee , create a canvas with same dimensions as actual image and draw hotspots as rectangles on the canvas.

One advantage in this approach is we don't have to recalculate the hotspot coordinates on resizing window as the hotspot are drawn in image itself.

 var imageWidth = 1920;   var imageHeight = 1368;   var hotspots = [{     x: 100,     y: 200,     height: 100,     width: 50   }, {     x: 300,     y: 500,     height: 200,     width: 100   }, {     x: 600,     y: 600,     height: 150,     width: 100   }, {     x: 900,     y: 550,     height: 100,     width: 25   }];     var positionHotSpots = function() {         var canvas = document.createElement('canvas');     canvas.height = imageHeight;     canvas.width = imageWidth;     var context = canvas.getContext('2d');     var imageObj = new Image();     imageObj.onload = function() {         context.drawImage(imageObj, 0, 0);         $.each(hotspots, function(i, h) {         context.rect(h.x, h.y, h.width, h.height);       });       context.fillStyle = "red";       context.fill();       $('#image').css('background-image', 'url("' + canvas.toDataURL() + '")');     };     imageObj.setAttribute('crossOrigin', 'anonymous');     imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg';     };   positionHotSpots();

html,  body {    height: 100%;    padding: 0;    margin: 0;  }  #image {    height: 100%;    width: 100%;    background-size: cover;    background-repeat: no-repeat;    background-position: center;  }

<!DOCTYPE html>  <html>    <head>    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>JS Bin</title>  </head>    <body>    <div id='image'></div>  </body>    </html>