Calculate the bounds of a segment of a background-image in Javascript

Question

Is there a way to calculate the rectangle bounds of a segment of a background-image (eg a red circle on the white background of the image) which is scaled by background-size: cover, even if it has a negativ value and is out of the mobile device viewport? Another solution would be to pin ax/y coordinate on the background picture position.

CSS:

  .background{
     position: absolute;
     width: 100%;
     height:100%;
     background: url('img.png') no-repeat;
     background-size: cover;
     background-position: 50% 0;

}

Here is the pen i made. You have to scale the browser to see the behaviour of the image-

http://codepen.io/kmpkt/pen/MbzxvM

Does anyone have an idea to solve this problem?

Answer 1

CSS background-size: cover

A background-size value of cover; applied to an element causes background images to be scaled, keeping their aspect ratio, so that the scaled image matches either the width or height of the element and is not smaller than it.

The scaling value required can be found by comparing aspect ratios of the element and background image, using a width/height quotient in the comparison.

If the element's aspect ratio is higher than the image's, the image is widened or narrowed to fit using a scaling value of:

    scale = element.width/image.width; // the element is more "landscape" than the image

If not the image is heightened or shortened to fit using a scaling value of:

   scale = element.height/image.height; // the element is more "portrait" then the image.

Note both width and height of the background image are scaled using the same factor.

Dimensions and offsets for a region of interest (ROI) within the background image must be scaled by the same scaling factor determined above.

CSS background-position: 50% 0;

I understand this makes no change to the y position of the background, but centers the background along the x-axis if it needs to be clipped on either side. Without x-axis clipping a scaled background image is centered by definition.

If the scaled image width is greater than the element's, the background needs to be moved left by half the difference:

xTranslation = (elementWidth - scaledImageWidth) / 2  // scaledImageWidth > elementWidth,

If not, no translation is required:

xTranslation = 0 // scaled image width == element width

A previously scaled x-axis offset for a region of interest within the background image needs to have the x translation determined above applied to it.

Finding the size of the backgrounded element.

element.getClientBorderRect()

returns an object containing width and height values for the element.

Avoid using document.clientWidth and document.clientHeight to obtain the dimensions of the viewport. clientHeight is returned with a maximum value of the the height of the body element. This can be less than the height of the viewport.