Bootstrap 5: Bilder
Inhaltsverzeichnis
Bildformen
Rounded Corners:
Circle:
Thumbnail:
Abgerundete Ecken
Die Klasse .rounded fügt einem Bild abgerundete Ecken hinzu:
Beispiel
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Kreis
Die Klasse .rounded-circle formt das Bild in einen Kreis:
Beispiel
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p>
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Miniaturansicht
Die Klasse .img-thumbnail formt das Bild in eine Miniaturansicht (umrandet):
Beispiel
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Bilder ausrichten
Verschieben Sie ein Bild nach links mit der Klasse .float-start oder nach rechts mit der Klasse .float-end :
Beispiel
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end"> Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="paris.jpg" class="float-start" alt="Paris" width="304" height="236">
<img src="paris.jpg" class="float-end" alt="Paris" width="304" height="236">
</div>
</body>
</html>
Zentriertes Bild
Zentrieren Sie ein Bild, indem Sie die Dienstprogrammklassen .mx-auto (margin:auto) und .d-block hinzufügen (display:block) zum Bild:
Beispiel
<img src="paris.jpg" class="mx-auto d-block">Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:</p>
<img src="paris.jpg" class="mx-auto d-block" style="width:50%">
</div>
</body>
</html>
Responsive Bilder
Bilder gibt es in allen Größen. Das gilt auch für Bildschirme. Responsive Bilder automatisch Passen Sie es an die Größe des Bildschirms an.
Erstellen Sie reaktionsfähige Bilder, indem Sie eine .img-fluid-Klasse hinzufügen zum Tag <img> hinzufügen. Das Bild wird dann gut auf das übergeordnete Element skaliert.
Die Klasse .img-fluid gilt für max-width: 100 %; und height: auto; zum Bild:
Beispiel
<img class="img-fluid" src="ny.jpg" alt="New York"> Probieren Sie es selbst aus →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-fluid" src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</body>
</html>