Bootstrap 4 - Estilos para imágenes II - Imágenes responsive y centrar imágenes
En el capítulo anterior vimos como poner a las imágenes bordes redondeados, imágenes en forma de círculo y con bordes al más puro estilo de foto instantánea.
En esta segunda y última parte, veremos como centrar fácilmente imágenes y como crear imágenes responsive que se adapten a los diferentes tamaños de pantalla.
Cómo centrar una imagen con Bootstrap 4
Con Bootstrap es muy fácil centrar cualquier imagen. Solo tendrás que utilizar dos clases en las imágenes. Estas clases son .d-block (display-block) y .mx-auto (margin-auto).
<div class="container"> <h1>Imagen centrada y responsive</h1> <img src="coche.jpg" alt="Coche" style="width:70%" class="mx-auto d-block"> </div>
Resultado:
Cómo crear imágenes responsive
Crear imágenes responsive es muy sencillo gracias a Bootstrap 4, con la clase img-fluid se crean imágenes responsive que se adaptan a todos los tamaños de pantalla sin necesidad de utilizar estilos adicionales.
<div class="container"> <h1>Imagen responsive</h1> <img src="coche_interior.jpg" alt="Interior del Coche" class="img-fluid"> </div>
Resultado:
La imagen que he utilizado en los dos ejemplos tiene esta resolución:
Y hasta aquí este capítulo. En el siguiente capítulo escribiré sobre estilos en los textos y más adelante seguiremos viendo más estilos con imágenes.
Gracias me sirvio
ResponderEliminarFunciona bien, muchas gracias
ResponderEliminar