(Durchschnitt: 0,00 von
5 –
0
Stimme(n)) - Fehler: Nicht angemeldet!
Loading...
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.