Forum
Tipps
News
Frage stellen
search
Menu-Icon
search

CSS Image Zoom: Bilder responsive an die Größe vom Browser-Fenster anpassen


  1. Computerhilfen
    2. ›
  2. Info
    3. ›
  3. Webmaster

danke
1 Leser hat sich bedankt
Bewerten
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Durchschnitt: 0,00 von 5 – 0 Stimme(n)) - Fehler: Nicht angemeldet!
Loading...

Cover Bild mit CSS automatisch skalieren

Mit CSS lassen sich Bilder ganz einfach an die Größe des Browserfenster anpassen – sogar automatisch, wenn es sich verkleinert oder vergrößert. Aber zusätzlich funktioniert dieser Trick auch für Responsive-Webseiten, damit die Bilder nicht nur auf dem Desktop, sondern auch auf mobilen Webseiten in der vollen Breite angezeigt werden, ohne dass wichtige Informationen abgeschnitten werden.

Beispiel: So sieht es aus!

Für die automatische Größenanpassung wird das Bild nicht direkt, sondern als Hintergrund-Bild eines DIV eingebaut: Dieses DIV hat die Breite von 100% und passt sich somit automatisch an die Breite des Browser-Fenster an.

Die Höhe wird hierbei nicht verändert: Das Bild bleibt in der Höhe immer gleich. Das kann wichtig sein, wenn der Rest der Seite bestehen bleiben und sich nur das Cover-Bild an den verfügbaren Ausschnitt der Seite anpassen soll. Soll die Größe ebenfalls automatisch angepasst werden, hilft dieser Javascript-Trick, um Breite und Größe anzupassen.

Um das Bild wie in unserem Beispiel als Hintergrund eines DIV mit maximaler Breit einzubauen, hilft dieser CSS Code:

background:url('bild.jpg');

Das hilft aber nicht alleine: Das Bild würde sonst einfach rechts abgeschnitten (und eventuell unten, wenn die Höhe des DIV zu klein ist). Hierfür helfen die folgenden drei CSS Attribute:

background-size:cover;
background-repeat: no-repeat;
background-position:50% 50%;

Durch die Angabe “background-size:cover” wird das Bild auf die ganze Größe des zur Verfügung stehenden DIV angepasst – und bei zu kleinen Bildern auch automatisch vergrößert. “background-position:50% 50%” sorgt dann dafür, dass immer die Mitte des Bildes zu sehen ist und das Bild, bei zu kleinem Browserfenster, notfalls am Rand beschnitten wird – aber immer so, dass die Bildmitte auch in der Mitte des DIV zu sehen ist.

 
Der gesamte Code aus unserem Beispiel sieht so aus:

<html>

<style type="text/css">
.btbutton { 
	width:100%;
	height:400px;	
	background:url('css-image-skalieren.jpg');
	background-size:cover;
	background-repeat: no-repeat;
	background-position:50% 50%;
}
</style>


<body style="width:100%;padding:0;margin:0;">

<div class="btbutton"></div>

</body>
</html>

Um auch automatisch die Höhe des Bildes mit anzupassen (dazu muss man vorher das Verhältnis von Breit zu Höhe wissen!) hilft dieser Javascript Trick.



Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!





Ähnliche Fragen:

» Top Tipps: Diese Tipps sind heute beliebt
Passende Wörter im Lexikon:
Bildpunkte
Bilder, die von einem Monitor wiedergegeben werden, bestehen aus einzelnen Bildpunkten (Pixeln). Je höher die Pixelanzahl ist, desto genauer und besser kann das Bild...

Bildschirmschoner
Der eigentliche Sinn des Bildschirmschoners ist, den Bildschirm vor dem Einbrennen des Monitorbildes zu schützen.Während das bei neueren Monitoren (außer ...

Bildwiederholfrequenz
Auf Bildschirmen erscheint ein Bild nur Bruchteile von Sekunden, weil die es erzeugenden Elektronenstrahlen oder Impulse sehr kurzzeitig wirken. Deshalb wird es mit einer...



Mehr Tipps zu CSS Image Zoom: Bilder responsive an...


© Computerhilfen.de (18463x gelesen)
CSS Image Zoom: Bilder responsive an die Größe vom Browser-Fenster anpassen