“use strict”;

var positionImage = function positionImage(imageEl) {
var imageDimensions = imageEl.dataset.imageDimensions.split(‘x’);
var originalWidth = imageDimensions[0];
var originalHeight = imageDimensions[1];
var focalPoint = imageEl.dataset.imageFocalPoint.split(‘,’);
var focalPointX = focalPoint[0];
var focalPointY = focalPoint[1];
var parentNode = imageEl.parentNode;

var scale = function () {
var imageRatio = originalWidth / originalHeight;
var parentClientSize = {
height: parentNode.clientHeight,
width: parentNode.clientWidth
};
var parentRatio = parentClientSize.width / parentClientSize.height;

if (imageRatio > parentRatio) {
return parentClientSize.height / originalHeight;
}

return parentClientSize.width / originalWidth;
}();

var getRelativeOffset = function getRelativeOffset() {
var targetWidth = Math.ceil(originalWidth * scale);
var targetHeight = Math.ceil(originalHeight * scale);
var parentDimensionWidth = parentNode.offsetWidth;
var parentDimensionHeight = parentNode.offsetHeight;
var overflowWidth = targetWidth – parentDimensionWidth;
var overflowHeight = targetHeight – parentDimensionHeight;
var valueX;

if (overflowWidth === 0) {
valueX = focalPointX;
} else {
valueX = Math.max(Math.min(targetWidth * focalPointX – parentDimensionWidth * 0.5, overflowWidth), 0) / overflowWidth;
}

var valueY;

if (overflowHeight === 0) {
valueY = focalPointY;
} else {
valueY = Math.max(Math.min(targetHeight * focalPointY – parentDimensionHeight * 0.5, overflowHeight), 0) / overflowHeight;
}

return {
valueX: valueX,
valueY: valueY
};
};

var relativeOffset = getRelativeOffset();
var valueX = relativeOffset.valueX;
var valueY = relativeOffset.valueY;
imageEl.style.objectPosition = “”.concat(valueX * 100, “% “).concat(valueY * 100, “%”);
};

We love hearing from you

Contact us

If you have questions about any of Liv Labs Products please contact the person who referred you to our Blog.

You can also contact us at support@livlabs.com or fill out the form and we will get back to you.