Clases para imágenes en Twitter Bootstrap

Hacía tiempo que no tocaba un post “por encargo”, pero me han comentado por Twitter que hable de las clases que el framework Bootstrap nos ofrece para trabajar con imágenes. No son muchas, la verdad, y de hecho están recogidas en su documentación oficial. Pero en fin, allá vamos.

Básicamente, en cuanto a la forma de la imagen, Bootstrap nos ofrece tres clases para tres resultados distintos: rounded, circle y thumbnail. La primera hará que la imagen tenga bordes redondeados, la segunda que esta sea circular y la tercera le pondrá un marco alrededor. El ejemplillo en código sería:`

<!--Bordes redondeados-->
<img src="carpeta/archivo.extension" alt="Texto1" class="img-rounded">
<!--Circular-->
<img src="carpeta/otroarchivo.extension" alt="Texto3" class="img-circle">
<!--Thumbnail con marco-->
<img src="otracarpeta/archivo.extension" alt="Texto5" class="img-thumbnail">

También hay una clase para imágenes responsivas, que básicamente aplica un max-width del 100% y un height automático, lo que hace que su tamaño se adapte al de su elemento padre. En ese caso se usar la clase img-responsive:

<img src="carpeta/imagen.extension" class="img-responsive" alt="Imagen de tamaño adaptable">

Y ya está todo el pescao vendido, no hay más que rascar en este tema (aunque sí en Bootstrap, un estupendo framework para el desarrollo de front end)

Anuncios

2 comentarios en “Clases para imágenes en Twitter Bootstrap

  1. Buenas noches, tengo dos imagenes una con extensión jpg y otra png, la clase img-responsive aplica bien a la extensión jpg, pero en caso contrario a la imagen con fondo transparente y formato png no funciona el responsive, estoy haciendo algo mal?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s