Bootstrap Bild

Ziel

In diesem Tutorial werden wir drei Klassen Bootstrap 3 diskutieren Stil, um Bilder hinzuzufügen. Wir werden auch über die Bootstrap 3 ansprechende Bildinhalt zur Verfügung gestellt diskutieren.

Allgemein Stil

Bevor wir die Definition einer Sonderklasse Bild Stil Bootstrap 3 Angebote zu diskutieren, werden wir die allgemeinen Stil-Definition-Bilder bieten Bootstrap 3 zu sehen.

img {
  border: 0;
}

Dies ist das erste Bild definiert CSS-Regeln in der CSS-Bootstrap gefunden 3, wenn das Bild-Rendering verwendet Grenze zu entfernen.

Dann wird in den Printmedien-Abfragen, die Bestimmungen dieser Regeln.

 img {
	page-break-inside: vermeiden;
  }
  img {
	! Max-Breite: 100% wichtig;
  }

page-break-inside: vermeiden, Seitenumbrüche innerhalb des Bildes zu vermeiden.

! Max-width: 100% wichtig , das Bild definiert Stil ist offensichtlich. Auch dort, wo es verwendet wird, um die Breite des Bildes außerhalb des Behälters zu bestimmen, kann es auch auf den Behälter Anzeige begrenzt werden. It! Wichtig in Verbindung mit anderen Arten verwendet , um Schäden zu dieser Art zu decken. Manchmal wollen die Entwickler den Stil eine bessere Unterstützung für mobile Geräte freundliche Bildwiedergabe, werden diese beiden Sonderregeln verwenden.

Es gibt auch eine andere Regel für Bild

img {
  vertical-align: middle;
}

Aufgrund dieser Regel wird ein Bild vertikal in den div oder andere Elemente zentriert werden. Wie in den folgenden Beispielen gezeigt.

Bitte beachten Sie, dass, wenn Sie das Bild vertikal je nach Kontext zu zentrieren müssen, die Notwendigkeit für zusätzliche Stile.

Spezielle Art

Bootstrap 3 bietet drei Klassenbild mit einem klaren Stil für Rendering.

img-gerundet

Sie können diese Klasse verwenden, um ein Bild mit abgerundeten Ecken zu machen. Um dies zu erreichen, bietet Bootstrap img-gerundet Klasse. Der Stil-Klasse wie folgt definiert

.img-gerundet {
  border-radius: 6px;
}

Daher ist es die border-radius - Eigenschaft auf 6 mit Pixelwerten verwendet , um das entsprechende Bild Filet definieren. Das folgende Beispiel zeigt zwei des gleichen Bildes, das erste Bild ohne img abgerundetes Klasse, das zweite Bild mit dem img abgerundetes Klasse. Man beachte, dass das zweite Bild abgerundet ist. Sie können hier klicken , um die Online - Beispiele zu sehen .

img-Thumbnail

Dies ist ein weiterer Bootstrap CSS-Klasse 3, die das Bild eines Miniatur hinzuzufügen. Der Klassencode ist unten dargestellt

.img-Thumbnail {
  display: inline-block;
  height: auto;
  max-Breite: 100%;
  padding: 4px;
  line-height: 1,428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-Übergang: alle 0,2s Leichtigkeit-in-out;
		  Übergang: alle 0,2s Leichtigkeit-in-out;
}

Hier ist ein Beispiel für diese Klasse von. Sie können hier klicken um die Online - Demo zu sehen .

img-Kreis

Durch die Verwendung der border-radius Eigenschaft, Bootstrap 3 entsteht ein Kreisbild dargestellt. img-Kreis Code Klasse CSS wie folgt

.img-Kreis {
  border-radius: 50%;
}

Klicken Sie hier , um die Online - Beispiele zu sehen . Im Folgenden finden Sie Screenshots und Code.

Responsive Bild

Bootstrap 3 bietet keine bereit ansprechende Bilder. Sie müssen img-responsive Klasse hinzufügen , um es auf das Bild reagiert , zu machen. Die Klasse der CSS-Code unten.

.img-responsive {
  display: block;
  height: auto;
  max-Breite: 100%;
}

Es definiert die Bilder als ein Block-Element angezeigt werden müssen, die Höhe des gleichen Bildhöhe, die maximale Breite des Bildes ist 100%, entsprechend dem Bild, um das Gerät zu begrenzen, zu dem es präsentiert wird.

Um das Bild zu machen eine Standardantwort, können Sie den Code in das CSS img hinzufügen {}.

Beispiele für die Verwendung dieser Klasse wie folgt. Sie können hier klicken um die Online - Demo zu sehen .

Dieses hinzugefügt, um die Bildantwortmethoden Einschränkungen.

Beziehungsweise, in der großen Leinwand und mobile Geräte (möglicherweise kleinere Bildschirmgröße Leistungsprobleme verursachen) gleich große Bilder mit hoher Auflösung geladen. Da der Browser vor CSS und JS vorinstallierten Bilder in einem Low-Speed-Netzwerkverbindungen geladen wird, kann es auch zu Leistungsproblemen führen. Stellen Sie sich vor Sie haben ein großes Bild und ein bestimmtes Objekt innerhalb es, wenn Sie die Bilder auf einem mobilen Gerät anzuzeigen, wird das Bild auf eine kleinere Version des Bildes verringert werden, so klein aussehen, das Problem zu Kunstrichtung bezeichnet .

Die Entwickler haben kommen mit Lösungen, die diese Einschränkungen zu überwinden. Wir werden sehen , Marc Grabanski und Christopher Schmitt Beispiel HiSRC von. Dies ist ein Bild erstellt automatisch eine niedrig, mittel, hoch auflösende Version von JQuery Stecker, je nach Ausführung durch die Bildanzeigeauflösung und Bandbreite des Geräts dargestellt.

Hinter uns das ansprechende Bild Tutorial, werden wir alle diese Methoden im Detail zu besprechen.

Klicken Sie hier , um die Online - Demo zu sehen . Code ist wie folgt: