code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
Mehr HTML & CSS (Deutsch)

Bilder mit Bootstrap verwenden

Achtung: Diese Seite wird gerade aktualisiert auf Bootstrap 4, beinhaltet aber noch Informationen zu Bootstrap 3. Bitte verwenden Sie in der Zwischenzeit die Originaldokumentation von Bootstrap.

In diesem Teil lernen Sie ein paar Tricks mit Bildern:

Für die meisten Beispiele wird Bootstrap 3 verwendet.

Falls Sie Bootstrap in Ihrem Projekt noch nicht integriert haben, lesen Sie zuerst den Teil über Bootstrap Framework verwenden aus dem HTML < CSS Tutorial.

Bilder in eine Webseite einbinden gelingt am einfachsten wie folgt:

Bild einfügen
<img src="mein-bild.png" alt="Mein Bild">

Damit hat das Bild eine fixe Grösse. Man kann das Bild zwar verkleinern oder vergrössern mit einer CSS-Regel wie width: 200px;, aber das ist oft nicht sinnvoll. Man versucht nämlich immer die Downloadgrösse der Webseite zu optimieren. Wenn man also ein Bild mit 400px-Breite herunterlädt und es dann immer auf 200px verkleinert, dann ist das nicht optimal. Deshalb sollte man schauen, dass das Bild immer die optimale Grösse hat.

Seitenbemerkung: Es gibt Situationen, wo hochaufgelöste Bilder erwünscht sind, zum Beispiel für die Darstellung auf Retina-Displays. Wenn Sie diesen Zusatzaufwand für solche Geräte machen wollen, dann sollten Sie dafür eine JavaScript Bibliothek wie retina.js verwenden.

Responsive Bilder

Wenn eine Webseite auf unterschiedlichen Bildschirmen angezeigt wird, dann kommt man nicht darum herum, diese auf kleinen Bildschirmen zu verkleinern.

Bootstrap 3 bietet hierzu eine CSS-Klasse img-responsive, welche Bilder automatisch auf die Bildschirmgrösse anpasst (lesen Sie über Responsive Bilder in der Bootstrap Dokumentation).

Responsive Bild einfügen
<img src="mein-bild.png" alt="Mein Bild" class="img-responsive" >

Bilder ausrichten

Zentrieren

Mit der CSS-Klasse center-block können Sie mit Bootstrap 3 Bilder zentrieren (siehe auch center in der Bootstrap Dokumentation):

Bild zentrieren
<img src="..." alt="..." class="center-block">
**Hinweis:** Die Klasse `center-block` kann auch zum Zentrieren von anderen HTML-Elementen gebraucht werden. Für Text und andere Inline-Elemente muss aber `text-center` verwendet werden (siehe Ausrichtungsklassen in der Bootstrap Dokumentation).

Bilder können nach links und nach rechts ausgerichtet werden. Der Text fliesst dabei um die Bilder herum. Dazu werden sogenannte Floats verwendet (lesen Sie über Floats in der Bootstrap Dokumentation).

<img src="..." alt="..." class="pull-left">

Links ausrichten

Rechts ausrichten
<img src="..." alt="..." class="pull-right">

Rechts ausrichten

Neue Zeile (Clearfix)

Beim Ausrichten nach links oder rechts werden alle nachfolgenden Elemente neben dem Bild dargestellt. Falls man in einer neuen Zeile beginnen möchte, muss man die clearfix-Klasse verwenden. Diese Klasse wird meistens auf ein übergeordnetes <div>-Element angewendet (mehr Infos zu clearfix in der Bootstrap Dokumentation):

<div class="clearfix">
  <img src="..." alt="..." class="pull-left">
  <p>Dieser Text ist neben dem Bild.</p>
</div>
<p>Dieser Text ist unter dem Bild.</p>

Clearfix

Abstand neben dem Bild

Meist möchte man neben dem Bild einen Abstand zum Text oder zu einem anderen Inhalt. Dies erreicht man am einfachsten durch definieren eines margins im CSS.

Wenn wir im CSS eine Regel für das img-Element erstellen würden, dann würde diese auf alle Bilder auf der Webseite angewendet werden. Dies ist meist nicht sinnvoll.

Für den Abstand rechts von einem Bild führen deshalb eine neue CSS-Klasse ein. Wir nennen diese abstand-rechts:

HTML für Abstand rechts
<img src="..." alt="..." class="pull-left abstand-rechts">

Im CSS definieren wir jetzt den Abstand.

CSS für Abstand rechts
.abstand-rechts {
  margin-right: 10px; 
}

Abstand

Neben margin-right gibt es natürlich margin-top, margin-bottom und margin-left.

Bilder mit Konturen

Bootstrap 3 bietet Möglichkeiten, um Bilder ganz einfach auf einer Webseite zu gestalten. Sie können die Ecken abrunden, einen Kreis ausschneiden oder einen dezenten Rahmen hinzufügen:

Bilder mit Konturen

Mit den folgenden drei CSS-Klassen können Sie Ihren Bildern solche Konturen hinzufügen (weitere Infos unter Bilder-Konturen in der Bootstrap Dokumentation):

Konturen mit Bootstrap
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Andere Artikel zu Bilder

Folgende Artikel zu Bilder könnte Sie auch interessieren:

Comments