OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Responsive Bilder mit maximaler Breite

Beim Erstellen einer responsive Website bin ich auf das Problem gestossen, dass ich Bilder mit der Bildschirmgrösse verkleinern möchte.

Ich arbeite mit dem Bootstrap Grid und mein erster Lösungsansatz war, die Bilder in einer „col-“ immer mit der Grösse von 100% anzuzeigen.

HTML:
<div class=“row“>
<div class=“col-xs-2“>
<img class=“fill“ src=“loremipsum.jpg“ alt=“Lorem Ipsum“ title=“Lorem Ipsum“ />
</div>
</div>
CSS:
img.fill {
width: 100%;
}

So weit so gut. Das Bild wird in der Breite des „col-xs-12“ Elements angezeigt und die Grösse ändert sich ebenfalls im Verhältnis.
Diese Lösung hat jedoch zur Folge, dass das Bild bei grösserem Bildschirm zu gross wird. Ich möchte, dass das Bild eine maximale Breite hat. Hier kommen wir an die Grenzen von CSS.

Ich kann nicht eine maximale Breite von 100 Prozent des Bildes definieren. Wenn diese von Bild zu Bild ändert. Natürlich besteht die Möglichkeit, jedem Bild einzeln eine maximale Breite zuzuweisen. Wenn die Bilder auf der Seite jedoch über ein CMS definiert werden, ist das nur über inline style möglich.

Auf Inline Style verzichte ich jedoch seit dem Artikel: http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Deshalb muss eine andere Lösung her – ein jQuery Plugin! Als ich nach kurzer Google Suche kein geeignetes Plugin fand, begann ich kurzerhand selbst mit der Entwicklung.

Das Plugin, nennen wir es gridImage, ist sehr simpel und besteht aus 15 Zeilen Code.

Zuerst müssen wir das Plugin bei jQuery „registrieren“:
(function ($) {
$.fn.gridImage = function () {
// Plugin Code kommt hier rein
return this;
};
}(jQuery));

Das Plugin kann nun auf einem jQuery Element aufgerufen werden. Z.B.
$(".grid-image").gridImage();

Nachdem das Bild geladen ist, müssen wir die maximale Breite des Bild auf die aktuelle Breite des Bild setzten. Zusätzlich setzen wir die Breite noch auf 100% und überprüfen mit der is Funktion, ob das Element auch wirklich ein Bild ist.

$(this).on('load', function () {
$this = $(this);
if ($this.is("img")) {
$this.css({
"width": "100%",
"max-width": $this.width()
});
}
});

Das ist schon der ganze Code, der benötigt wird um Bilder responsive mit einer maximalen Breite anzuzeigen.

Das Plugin steht Ihnen auf Bitbucket zur Verfügung: https://bitbucket.org/sdheureuse/gridimage


kommentieren


0 Kommentar(e):