Cómo funcionan las imágenes en Bootstrap 4

En este artículo puedes encontrar la información que necesitas para añadir imágenes adaptable a todos los dispositivos utilizando el framework Bootstrap 4.

Documentación y ejemplos para convertir las imágenes en diseño responsivo (para que nunca se vuelvan más grande que sus contenedores). Todo sin romperte mucho la cabeza. Tan solo agregando estilos a través de clases CSS. Bootstrap ya lo tiene preparado para usar y hacerte la vida más fácil.

Con Bootstrap las imágenes responsivas se pueden conseguir fácilmente agregando a la imagen el atributo «class» con el valor «img-fluid». Así de simple.

Las imágenes en Bootstrap se adaptan a todos los dispositivos con .img-fluid que agrega un ancho máximo del 100% y una altura automática. Se aplica a la clase de la imagen para que se escale con el contenedor padre.

Por ejemplo:

<img class="img-fluid" src="https://picsum.photos/id/237/1500/600" />

En el ejemplo en funcionamiento estamos trabajando con una imagen relativamente grande. Tiene un tamaño de 1500px de ancho y 600px de alto. Si lo agregamos de la siguiente forma:

<div class="row">
    <div class="col-lg-12">
        <img class="img-fluid" src="https://picsum.photos/id/237/1500/600" />
    </div>
</div>

La imagen se adaptará al tamaño del contenedor padre tal y como describimos anteriormente.

De esta forma, se adaptará perfectamente a todos los dispositivos.

Alinear las imágenes con las clases flotantes o de alineación de texto también es posible. Las imágenes a nivel de bloque pueden centrarse utilizando la clase de utilidad de margen .mx-auto.

<img class="rounded mx-auto d-block" src="https://picsum.photos/id/237/200/200" />

Ahora, tenemos una imagen pequeña de 200px que hemos centrado con «mx-auto». La clase «rounded» es un detalle para poner borde redondeado a la imagen. La clase «d-block» se utiliza para controlar la estructura. Con ella estamos definiendo que la imagen es un bloque. De esta forma, se hará automáticamente un salto de línea.

Las imágenes pueden adoptar comportamientos flotantes. Bootstrap tiene disponible 2 clases que permite flotar los elementos a la izquierda o derecha.

<div class="row">
    <div class="col-lg-12">
        <img class="rounded float-left" src="https://picsum.photos/id/237/200/200" />
        <img class="rounded float-right" src="https://picsum.photos/id/237/200/200" />
    </div>
</div>

La clase «float-left» posiciona el elemento o caja lo más posible a la izquierda de su posición original y la clase «float-right» lo mismo pero a la derecha.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Una respuesta a “Cómo funcionan las imágenes en Bootstrap 4”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre