Figuras

Las figuras, con su imagen y su leyenda, no cuentan con gran cantidad de estilos aplicados por defecto. Aparecerán con alineación centrada y texto en cursiva en la leyenda.

Las imágenes se estirarán para ocupar el espacio disponible. En el ejemplo siguiente se ha limitado su tamaño.

Ejemplo

Código del ejemplo

La clase card para figuras

Podemos mejorar un poco el aspecto de las figuras usando la clase card. Esto hace que la figura tenga aspecto de tarjeta.

Podemos usar también las clases xx-small, x-small, small, medium , large, x-large o xx-large para limitar el ancho máximo. Si las imágenes son más pequeñas que el tamaño máximo, las figuras no se estirarán.

Para el siguiente ejemplo, se ha cambiado la disposición de bloque de las figuras a en línea con propiedades de bloque usando la clase inline-block, de esta forma se ven una al lado de otra sin usar flex.

Ejemplo

Código del ejemplo

Relación de aspecto de la imagen

A las imágenes no se les asigna una relación de aspecto por defecto, pero podemos indicar unas proporciones "estándar" usando las clases:

• portrait: 3/4.
• slim: 2/5.
• landscape: 4/3.
• wide: 5/2.
• square: 1/1.
• legacy: 3/2.

Evidentemente, podemos editar estas proporciones en el CSS si no nos gustan o no son adecuadas a aquello que queramos hacer.

Ejemplo

Código del ejemplo

Ajuste de la imagen en la figura

Las imágenes dentro de las figuras se estirarán en función de la proporción seleccionada. Una imagen con la proporción incorrecta quedará deformada, tal y como se muestra en la primera figura del siguiente ejemplo.

Para solucionar esto, en las imágenes podemos usar las clases:

• fit: aumentará la imágen hasta hacerla encajar en altura o anchura (lo que encaje antes) pero perderemos parte de la misma por los extremos.
• scale: reducirá la imágen para conseguir que entre entera en la figura. Como contrapartida la imagen se volverá más pequeña y habrá un relleno de color del fondo alrededor para completar la zona no ocupada.

Ejemplo

Código del ejemplo

Figuras seleccionables

Para crear figuras seleccionables, tan solo tenemos que añadir el script ubicado en js/Selectable.js y colocarles la clase selectable. De este modo podremos seleccionar o quitar la selección en las figuras haciendo clic.

Si queremos que una figura esté seleccionada por defecto, le añadiremos además la clase selected.

Ejemplo

Código del ejemplo