Bootstrap 5: Εικόνες

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Σχήματα εικόνας

Rounded Corners:

Circle:

Thumbnail:

Στρογγυλεμένες γωνίες

Η κλάση .rounded προσθέτει στρογγυλεμένες γωνίες σε μια εικόνα:

Παράδειγμα

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Δοκιμάστε το μόνοι σας →

<!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>

Κύκλος

Η κλάση .rounded-circle διαμορφώνει την εικόνα σε κύκλο:

Παράδειγμα

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Δοκιμάστε το μόνοι σας →

<!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>

Ονυξ του αντίχειρος

Η κλάση .img-thumbnail διαμορφώνει την εικόνα σε μικρογραφία (με περίγραμμα):

Παράδειγμα

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Δοκιμάστε το μόνοι σας →

<!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>

Στοίχιση εικόνων

Μετακινήστε μια εικόνα προς τα αριστερά με την κλάση .float-start ή προς τα δεξιά με .float-end :

Παράδειγμα

 <img src="paris.jpg" class="float-start"> 
<img src="paris.jpg" class="float-end">

Δοκιμάστε το μόνοι σας →

<!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>

Κεντρική εικόνα

Κεντράρετε μια εικόνα προσθέτοντας τις τάξεις βοηθητικού προγράμματος .mx-auto (margin:auto) και .d-block (display:block) στην εικόνα:

Παράδειγμα

 <img src="paris.jpg" class="mx-auto d-block">

Δοκιμάστε το μόνοι σας →

<!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>

Αποκριτικές εικόνες

Οι εικόνες διατίθενται σε όλα τα μεγέθη. Το ίδιο και οι οθόνες. Αποκριτικές εικόνες αυτόματα προσαρμόστε ώστε να ταιριάζει στο μέγεθος της οθόνης.

Δημιουργήστε εικόνες που αποκρίνονται προσθέτοντας μια τάξη .img-fluid στην ετικέτα <img>. Στη συνέχεια, η εικόνα θα κλιμακωθεί όμορφα στο γονικό στοιχείο.

Η τάξη .img-fluid ισχύει max-width: 100%; και height: auto; στην εικόνα:

Παράδειγμα

<img class="img-fluid" src="ny.jpg" alt="New York">

Δοκιμάστε το μόνοι σας →

<!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>