Imágenes Bootstrap 5
- Página anterior BS5 Tablas
- Página siguiente BS5 Jumbotron
Cursos optativos
Recomendaciones de cursos:
Forma de imagen .rounded
Ejemplo
La clase .rounded agrega bordes redondeados a la imagen:
<img src="flower.jpg" class="rounded" alt="Flower">
Circular .rounded-circle
Ejemplo
La clase .rounded-circle da forma a la imagen como circular:
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
Miniatura .img-thumbnail
Ejemplo
La clase .img-thumbnail da forma a la imagen como miniatura (con borde):
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
Alinear la imagen .float-start La clase .float-end hace que la imagen flote a la izquierda, o usar .float-end Flotar a la derecha:
Ejemplo
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
Imagen centrada
Para centrar la imagen, hemos agregado la clase utility a la imagen. .mx-auto (margin:auto) y .d-block (display:block):
Ejemplo
<img src="tulip.jpg" class="mx-auto d-block">
Imágenes responsivas
Las imágenes tienen varios tamaños. La pantalla también. Las imágenes responsivas se ajustan automáticamente para adaptarse al tamaño de la pantalla.
Al agregar .img-fluid Añadir clase a <img> Para crear imágenes responsivas, utilice la etiqueta de clase. Luego, la imagen se ajustará bien dentro del elemento padre.
.img-fluid Clase de imagen aplicada max-width: 100%; y height: auto; :
Ejemplo
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- Página anterior BS5 Tablas
- Página siguiente BS5 Jumbotron
