Ein Bild im Rahmen zu zentrieren oder viel mehr so zu positionieren das der wichtigste Bestandteil im sichtbaren Bereich liegt, dafür braucht man nicht viel, ein bisschen Logik in JavasScript, ein DIV als Rahmen und ein Bild und schon läuft es.
Diese Implementierung bringt eine Filterung aller Bilder auf der Seite mit sich die im class-Attribut focus haben, für diese wird ein EventListener auf das load-Event eingerichtet, so dass auch ein lazy loading berücksichtigt ist. Ist das Bild geladen wird es initial fokussiert und ein EventListner am Window Resize sorgt dafür das bei Änderung auf edwaige Einflüsse auf die Rahmen-Abmessungen sofort reagiert wird.
Einzige Voraussetzung: <img class="focus" src="..." />, das src-Attribute kann natürlich auch durch ein data-src über meine Viewport (lazy loading) Variante befüllt werden, ohne data-focus-x und data-focus-y Attribute wird das Bild zentriert, bei Angabe von zumindest einem der beiden Werte wird eine Fokussierung durchgeführ. Der Ursprung ist die linke obere Ecke des Bildes und die Angaben gehen prozentual von 0 .. 100, also <img class="focus" data-focus-x="75" data-focus-y="25" /> wäre dann rechts oben.
Kleines zusätzliches Feature: steht in dem img-Tag ein Attribute data-focus mit dem Wert contain<img data-focus="contain" /> wird das Komplette Bild Zentriert dargestellt, der Wert cover <img data-focus="cover" /> entspricht dem Standard muss allerdings nicht gesetzt werden.
// coding: utf-8
/** Created by: Udo Schmal | https://www.gocher.me/ */
(function() {
'use strict';
// initialize focus object
function Focus (img) {
this.img = img; // image
this.wrapper = img.parentNode; // frame
this.focus_x = null;
this.focus_y = null;
this.focus_observe = false;
this.init();
}
Focus.prototype = {
init: function () {
var self = this;
// identify frame
this.wrapper = this.img.parentNode;
var cnt = 0;
while ((this.wrapper.tagName.toLowerCase() !== 'body') &&
((this.wrapper.offsetWidth === 0) || (this.wrapper.offsetHeight === 0))) {
this.wrapper = this.wrapper.parentNode;
cnt++;
if (cnt>2) {
break;
}
}
if ((this.wrapper.tagName.toLowerCase() !== 'body') && (cnt < 3)) {
if (this.img.hasAttribute('data-focus-observe')) {
this.focus_observe = this.img.getAttribute('data-focus-observe');
}
// frame must have position attribute for focused content
let properties = window.getComputedStyle(this.wrapper);
if (!properties.getPropertyValue('position')) {
this.wrapper.style.position = 'relative';
}
// image must have a absolute position
this.img.style.position = 'absolute';
this.img.style.maxWidth = 'none';
this.handleEvent();
// observe image for changes in focus attributes
if (this.focus_observe) {
this.imgObserver = new MutationObserver(function () { self.handleEvent(); });
this.imgObserver.observe(self.img, {
attributes: true,
attributeFilter: ['data-focus', 'data-focus-x', 'data-focus-y']
});
}
// observe wrapper on resize
if ('ResizeObserver' in window) {
this.wrapperObserver = new ResizeObserver(function () { self.handleEvent(); });
this.wrapperObserver.observe(self.wrapper);
} else {
// observe wrapper for changes in class and style attribute
this.wrapperObserver = new MutationObserver(function () { self.handleEvent(); });
this.wrapperObserver.observe(self.wrapper, {
attributes: true,
attributeFilter: ['class', 'style']
});
// until ResizeObserver works on all devices
this.handleEvent.bind(this);
window.addEventListener("resize", this, false);
}
} else {
setTimeout(function() {self.init();}, 15);
}
},
handleEvent: function () {
// get dependencies from attributes
var width = this.wrapper.offsetWidth, // frame width
height = this.wrapper.offsetHeight, // frame height
type = this.img.getAttribute('data-focus'); // full centered image else cover
if (this.focus_observe || this.focus_x == null) {
this.focus_x = .50; // center
this.focus_y = .50; // center
if (type !== 'contain') {
// overwrite focus x coortinate else center
if (this.img.getAttribute('data-focus-x')) {
this.focus_x = parseInt(this.img.getAttribute('data-focus-x')) / 100;
}
// overwrite focus y coordinate else center
if (this.img.getAttribute('data-focus-y')) {
this.focus_y = parseInt(this.img.getAttribute('data-focus-y')) / 100;
}
}
}
// concept: depending on the aspect ratio and the type of filling of the frame
// one side adapts to the frame and the other side is cut off or has a stub
var scaled, value;
if ((type !== 'contain') === ((this.img.naturalWidth / this.img.naturalHeight) >= (width / height))) {
this.img.style.width = 'auto';
this.img.style.height = '100%';
this.img.style.top = '0';
scaled = this.img.naturalWidth * (height / this.img.naturalHeight);
value = - Math.floor((scaled * this.focus_x) - (width / 2));
if (type !== 'contain') {
if (value > 0) {
value = 0;
} else if (value < width - scaled) {
value = Math.floor(width - scaled);
}
}
this.img.style.left = value + 'px';
} else {
this.img.style.width = '100%';
this.img.style.height = 'auto';
this.img.style.left = '0';
scaled = this.img.naturalHeight * (width / this.img.naturalWidth);
value = - Math.floor((scaled * this.focus_y) - (height / 2));
if (type !== 'contain') {
if (value > 0) {
value = 0;
} else if (value < (height - scaled)) {
value = Math.floor(height - scaled);
}
}
this.img.style.top = value + 'px';
}
}
};
// get all images on page that class list contains "focus"
var els = document.querySelectorAll('img[class~="focus"]');
if (els.length > 0) {
// this don't breaks viewport (lazy loading)
for (var i=0; i < els.length; i++) {
if (!els[i].complete || (els[i].naturalWidth === 0)) {
els[i].addEventListener("load", function (e) { new Focus(this); }, false);
} else {
new Focus(els[i]);
}
};
}
})();
