46 - Imágenes

Bootstrap 5 define una serie de clases para aplicar al elemento HTML <img>:

  • rounded : Define las esquinas redondeadas en la imagen.
    Si accedemos al código del archivo bootstrap.css veremos que inicializa la propiedad border-radius con el valor de 0.25rem.
  • rounded-circle : Convierte la imagen en un círculo, para ello Bootstrap 5 inicializa la propiedad border-radius: 50%;
  • img-thumbnail : Define un recuadro y muestra la imagen cuando se carga la página en el navegador.
  • img-fluid : Permite escalar correctamente la imagen (Esto lo logra Bootstrap 5 definiendo la propiedad max-width: 100%; y height: auto;)
  • float-start : flota la imagen a la izquierda.
  • float-end : flota la imagen a la derecha.

Veamos una página que muestra unas imágenes aplicando sucesivamente las distintas clases disponibles en Bootstrap 4:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 5</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>

  <div class="container">
    <img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="rounded">
    <hr>
    <img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="rounded-circle">
    <hr>
    <img src="https://www.tutorialesprogramacionya.com/cssya/foto1.jpg" class="img-fluid">    
    <hr>
    <img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="img-thumbnail">    
    <hr>
    <img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="float-start">
    <img src="https://www.tutorialesprogramacionya.com/cssya/imagen1.png" class="float-end">    
    <hr>    
  </div>

</body>
</html>

Tenemos como resultado en el navegador:

img bootstrap 5

Ejecutar Ejemplo

Retornar