Bootstrap -Bild ändern sich
In dieser Beschreibung wird beschrieben:
- So ändern Sie ein Bild mit Bootstrap ein Bild?
- So sehen Sie die Bildgröße auf verschiedenen Bildschirmen?
So ändern Sie ein Bild mit Bootstrap ein Bild?
Der "IMG-FluidDie Klasse wird verwendet, um das Bild reaktionsschnell zu machen. Responsive Bilder sind solche, die sich automatisch gemäß den Bildschirmgrößen ändern. Die Klasse „IMG-Fluid“ hat die CSS-Eigenschaften vordefiniert "maximale Breite"Mit dem Wert"100%" Und "Höhe"Mit dem Wert"Auto”.
Schauen Sie sich das Beispiel an, um das angegebene Konzept zu verstehen.
Html
Fügen Sie die HTML hinzu ""Element mit den Attributen" SRC "," Klasse "und" Alt ", wo:
- “srcDas Attribut legt den Pfad des Bildes fest.
- “Klasse”Wird mit der Klasse„ IMG-Fluid “eingestellt, um sie reaktionsschnell zu machen.
- “AltGibt den alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen werden kann:
Wie Sie sehen können, wurde das reaktionsschnelle Bild erfolgreich erstellt:
So sehen Sie die Bildgröße auf verschiedenen Bildschirmen?
Klicken Sie auf der Webseite mit der rechten Maustaste und wählen Sie die “Prüfen" Möglichkeit. Infolgedessen wird das Tool -Toolfenster des Entwicklers geöffnet, von wo aus Sie auf die “klicken müssen“Geräte -Symbolleiste umschalten" Besonderheit:
Klicken Sie dann auf die “Dimensionen: reaktionsschnell" Möglichkeit. Ein Dropdown-Menü wird angezeigt. Wählen Sie die Optionen aus und sehen Sie, wie das Bild auf diesem bestimmten Gerät aussieht:
So können die Bilder mit Bootstrap geändert werden.
Abschluss
Die Bootstrap "IMG-FluidDie Klasse wird verwendet, um die Bilder ansprechend zu machen. Diese Klasse hat ein vordefiniertes CSS “maximale Breite”Eigenschaft mit dem Wert“100%" Und "Höhe"Mit dem Wert"Auto”. Fügen Sie zunächst das Bild mit dem "" Element "" die Bildschirmgrößen zu, um das Bild zu machen und die "IMG-Fluid" -Kläufe zu ereln. Diese Beschreibung hat gezeigt, wie das Bild mit dem Bootstrap die Größe des Bildes verändert wird.