Bootstrap 4 - Estilos para imágenes II - Imágenes responsive y centrar imágenes

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.