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)
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?
Es posible que en algún navegador genere algún conflicto. Si añades también la clase col-lg-12 o la propiedad css width:100% se soluciona en la mayoría.