\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Focus (Point) - Vanilla JS}
\usepackage[
pdftitle={Focus (Point) - Vanilla JS}
pdfsubject={Zentrierung Bild im Rahmen leicht gemacht}
pdfauthor={Udo Schmal}
pdfkeywords={focus, FocusPoint, JavaScript, Vanilla JS}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Focus (Point) - Vanilla JS
\singlespacing
{\Large \textbf{\label{sec:headline}JavaScript}}

\singlespacing
{\LARGE \textbf{\label{sec:title}Focus (Point) Vanilla JS}}

\singlespacing
{\large \textbf{\label{sec:subtitle}Zentrierung Bild im Rahmen leicht gemacht}}

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: \&lt;img class=\&quot;focus\&quot; src=\&quot;...\&quot; /\&gt;, das src-Attribute kann natürlich auch durch ein data-src über meine \href{http://www.gocher.me/viewport}{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ührt. Der Ursprung ist die linke obere Ecke des Bildes und die Angaben gehen prozentual von 0 .. 100, also \&lt;img class=\&quot;focus\&quot; data-focus-x=\&quot;75\&quot; data-focus-y=\&quot;25\&quot; /\&gt; wäre dann rechts oben.\newline
Kleines zusätzliches Feature: steht in dem img-Tag ein Attribute data-focus mit dem Wert contain\&lt;img data-focus=\&quot;contain\&quot; /\&gt; wird das Komplette Bild Zentriert dargestellt, der Wert cover \&lt;img data-focus=\&quot;cover\&quot; /\&gt; entspricht dem Standard muss allerdings nicht gesetzt werden.

\href{http://www.gocher.me/code/focus/focus.js}{focus.js}
\label{sec:formFocus}width\label{sec:width}px\newline
height\label{sec:height}px\newline
type\label{sec:type}covercontain\newline
focus-x\label{sec:focus-x}\%\newline
focus-y\label{sec:focus-y}\%\newline
\label{sec:div}\label{sec:img}\end{document}