Ver índice de contenidos del libro

4.2.  Imágenes

Bootstrap 3 define varias clases CSS para decorar las imágenes de tus sitios web:

  • .img-rounded, añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el estilo border-radius: 6px.
  • .img-thumbnail, muestra la imagen con un relleno blanco y un borde fino simulando el aspecto de las fotografías de las antiguas cámaras instantáneas. Añade además una breve animación para hacer que la imagen aparezca al cargar la página.
  • .img-circle, convierte la imagen en un círculo aplicando el estilo border-radius: 50%

Advertencia El navegador Internet Explorer 8 no soporta el uso de esquinas redondeadas, por lo que los estilos .img-rounded y .img-circle no tienen ningún efecto sobre las imágenes.

Ejemplo:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Imágenes decoradas en Bootstrap 3

Figura 4.8 Imágenes decoradas en Bootstrap 3

Si estás buscando cómo hacer que las imágenes de Bootstrap 3 se comporten de manera responsive como en Bootstrap 2, consulta la sección de imágenes responsive de los capítulos anteriores.