Esta publicación se concentra en el fascinante mundo de diseño y funcionalidad: las imágenes responsive con Bootstrap. ¿Alguna vez te has encontrado con una página web que se ve perfecta en tu computadora, pero cuando intentas acceder desde tu teléfono móvil
, las imágenes se distorsionan o no se adaptan correctamente? ¡No te preocupes, porque Bootstrap está aquí para salvar el día!Ciertamente Bootstrap 5 ofrece una amplia variedad de clases y estilos predefinidos para darle estilo a las imágenes y mejorar la experiencia visual de los usuarios.
Con las clases de Bootstrap 5, puedes controlar fácilmente el tamaño, la forma, el borde y la posición de las imágenes, adaptándolas a las necesidades específicas de tu diseño. Además, Bootstrap 5 ofrece opciones para aplicar efectos de sombra, bordes redondeados y opacidad a las imágenes, lo que te permite crear un estilo único y profesional para tus proyectos.
Las imágenes responsivas son otro aspecto importante de Bootstrap 5, lo que significa que las imágenes se ajustarán automáticamente al tamaño de la pantalla del dispositivo en el que se visualicen, garantizando una experiencia visual óptima en diferentes dispositivos, desde teléfonos móviles hasta computadoras de escritorio.
En esta sección del tutorial de Bootstrap 5, aprenderás a utilizar las distintas clases disponibles para personalizar el aspecto y el comportamiento de las imágenes en tu sitio web. Desde el uso de clases de tamaño para controlar la escala de las imágenes hasta la aplicación de clases de posicionamiento para alinearlas correctamente.
Clases para dar estilo a las imágenes en Bootstrap 5
Bootstrap 5 define una serie de clases utilizadas para dar estilo a las imágenes, aplicándolas al elemento HTML <img>. Seguidamente se exponen las clases más utilizadas para tal propósito.
| Clase | Descripción |
|---|---|
.img-fluid | Hace que la imagen sea fluida, es decir, se ajusta al ancho del contenedor que la contiene sin desbordar. |
.rounded | Agrega bordes redondeados a la imagen. |
.rounded-circle | Hace que la imagen tenga forma de círculo, útil para fotos de perfil y avatares. |
.rounded-0 | Elimina los bordes redondeados de la imagen. |
.img-thumbnail | Agrega un estilo de marco con sombra a la imagen, creando un aspecto de miniatura. |
.float-start | Flota la imagen a la izquierda del texto o del contenedor. |
.float-end | Flota la imagen a la derecha del texto o del contenedor. |
.mx-auto | Centra horizontalmente la imagen en su contenedor. |
.my-auto | Centra verticalmente la imagen en su contenedor. |
.d-block | Convierte la imagen en un bloque para que ocupe todo el ancho del contenedor y respete el espacio vertical. |
.d-inline | Hace que la imagen se muestre en línea con el texto, sin ocupar todo el ancho del contenedor. |
.d-inline-block | Hace que la imagen se muestre en línea con el texto y permita ajustar su tamaño y margen. |
Hay que tener en cuenta que estas son solo algunas de las clases disponibles para trabajar con imágenes en Bootstrap 5. Puedes combinarlas y personalizarlas según tus necesidades.
Imagen responsive
Las imágenes en Bootstrap se hacen responsive con una clase especial llamada .img-fluid que hace que las imágenes se ajusten automáticamente al ancho del contenedor. Esto significa que no importa si estás viendo el sitio en una pantalla grande, una tablet o un teléfono móvil, tus imágenes siempre se verán perfectas.
Para aplicar la clase .img-fluid a una imagen, Bootstrap define la propiedad max-width: 100%; y un height:auto;. Esto hace que la imagen se escale proporcionalmente al ancho del contenedor padre, evitando que sobrepase sus límites.
Esto permite que las imágenes se adapten a diferentes resoluciones de pantalla, mejorando la experiencia de usuario en dispositivos móviles y de escritorio.
Este sencillo ajuste garantiza que las imágenes dentro del diseño se mantengan siempre dentro de los límites del contenedor padre, mejorando la experiencia de usuario en dispositivos con diferentes tamaños de pantalla y resoluciones. Es especialmente útil en diseños responsive, asegurando que la visualización de las imágenes sea óptima en cualquier dispositivo, desde móviles hasta desktops.
Las imágenes fluidas son una pila de imágenes basada en un diseño adaptable. Permiten que la imagen crezca y se reduzca de tamaño junto con el sitio en lugar de permanecer allí con la misma altura y ancho fijos.
Ejemplo:
< img src="eniun.jpg" class="img-fluid" alt="Eniun">
Imagen con esquinas redondeadas
La clase .rounded agrega esquinas redondeadas a una imagen. Además se hay otras clases para ajustar el redondeo de las esquinas. Por ejemplo eligiendo qué esquina se desea redondear o eligiendo una clase que hace la imagen en forma de círculo. Ejemplo:
<img src="eniun.jpg" class="rounded" alt="Eniun"> <img src="eniun.jpg" class="rounded-top" alt="Eniun"> <img src="eniun.jpg" class="rounded-end" alt="Eniun"> <img src="eniun.jpg" class="rounded-bottom" alt="Eniun"> <img src="eniun.jpg" class="rounded-start" alt="Eniun"> <img src="eniun.jpg" class="rounded-circle" alt="Eniun">
Imagen tipo miniatura
La clase .img-thumbnail da forma de miniatura a la imagen y le asigna un borde redondeado de 1 píxel. Ejemplo:
< img src="eniun.jpg" class="img-fluid" alt="Eniun">
Alineación de imágenes
Desplace una imagen hacia la derecha con la clase .float-end o hacia la izquierda con .float-start. Ejemplo:
<img src="eniun.jpg" class="float-end" alt="Eniun"> <img src="eniun.jpg" class="float-start" alt="Eniun">
Además, a las imágenes se les puede aplicar las clases de los bordes.
Ejemplos
Fuentes de consulta: https://www.eniun.com/i
| Salu2 y bendiciones, Atte, Angel Paz |  |
