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 estiloborder-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 estiloborder-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:
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.