Imagenes en Foundation

En este Framework las imagenes son responsivas por defecto, adempas de suportar imagenes en miniatura

Thumbnails

Envuelva un elemento <a> alrededor de un elemento <img> para usar la imagen como un ancla.

Agrega la clase .th en <a> para dar forma a la imagen para una vista en miniatura. Esto también añadirá un esquema de color azul claro alrededor de la miniatura al colocar el apuntador del mouse sobre ella

:

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

Rounded Thumbnails

Agrega la clase th radius, para lograr este efecto:

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

Lista de imagenes

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

Block Grid

Es una manera de dividir uniformemente el contenido de una lista dentro de la cuadrícula. Si desea crear una fila de cinco imágenes o párrafos uniformemente espaciadas, no importa el tamaño de la pantalla, esto es para usted.

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

Si utiliza el small-block-grid solamente, la red mantendrá su espaciamiento y configuración no importa el tamaño de la pantalla. Si utiliza large-block-grid solamente, los elementos de la lista se acumulará en la parte superior uno sobre el otro para dispositivos pequeños. Si utiliza esas dos clases combinadas, se puede controlar la configuración y el diseño por separado para cada punto de interrupción.

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