2.1.5. Imagenes Bootstrap

Imagenes responsivas

Bootstrap 3 aporta la clase CSS img-responsive, la cual ajusta automáticamente una imagen al tamaño de la pantalla. Notese que se agrego una clase center-block para centrar la imagen horizontalmente

See the Pen Nxwgpb by JOSE (@albatros) on CodePen.

Alineación izquierda o derecha

Una imagen puede alinearse a la izquierda o derecha de su texto usando las clases pull-left y pull-right. Observe que usamos adicionalmente la clase img-responsive para darle soporte a pantallas pequeñas

See the Pen PZOjyG by JOSE (@albatros) on CodePen.

Estilizado de imagenes

Bootstrap incorpora ciertos estilos básicos para aplicar a nuestras imágenes, tales, como redondear bordes, formas circulares y aspecto miniaturas

.img-rounded − Suma border-radius:6px redondeando los bordes

.img-circle - redondea toda la imagen con border-radius:500px.

.img-thumbnail − Suma un bit de padding y borde gris.

See the Pen qbVLmd by JOSE (@albatros) on CodePen.

Imagenes thumbnails

El diseño de imágenes, vídeos, texto, etc, en una cuadrícula y en miniatura es común, y Bootstrap tiene una manera fácil de hacer estos.

Añadir una etiqueta <a> con la clase de .thumbnail alrededor de una imagen

Esto añade cuatro píxeles de padding y un borde gris y un resplandor de animación describe la imagen, al colocar el cursor del mouse sobre de ella.

El siguiente ejemplo muestra una miniatura por defecto-

See the Pen WrMdNR by JOSE (@albatros) on CodePen.

Contenido personalizado

Ahora que tenemos una miniatura básica, es posible añadir cualquier tipo de contenido HTML como encabezados, párrafos, o botones en miniaturas. Siga los pasos a continuación

Cambie la etiqueta <a> que tiene una clase de .thumbnail a un <div>.

Dentro de ese <div>, puede añadir cualquier cosa que necesite.

Si desea agrupar varias imágenes, use una lista desordenada y cada elemento de la lista se flota hacia la izquierda.

El siguiente código lo demuestra

See the Pen adQVpa by JOSE (@albatros) on CodePen.