Galerías de imágenes o vídeos
En este ejemplo se muestran ejemplos de galerías de imágenes (también sirve para vídeo).
Índice
- Galería básica
- Imágenes de distintos tamaños
- Ajustando el encaje (fit)
- Ajustando el encaje (scale)
- Galería con modales
- Galería de paisajes, con modales
Galería básica
Este es el aspecto de una galería básica hecha en
FastLight. Simplemente necesitamos un contenedor de clase gallery,
aunque en este ejemplo le hemos añadido algunas clases más:
gallery: le da el aspecto y aplica el flex.w75(opcional): para que ocupe el 75% del ancho disponible.centered-block(opcional): centrado en el documento.my2(opcional): aumentar el espacio vertical con otros elementos.
Las figuras dentro de la galería tienen las clases card y small.
Encontraréis más información sobre figuras e imágenes en el ejemplo de
figuras e imágenes:
card: forma de tarjetasmall: tamaño pequeño.
Ejemplo
Código del ejemplo
Imágenes de distintos tamaños
Con imágenes de distintos tamaños, obtendremos una galería con imágenes de proporciones diferentes. Seguramente esto no nos guste demasiado...
Ejemplo
Código del ejemplo
Ajustando la proporción con fit
Para ajustar imágenes de distintos tamaños en una galería flex sin que se deformen,
añadiremos la clase fit a las imágenes. Esto las escalará para rellenar todo el espacio disponible
(pero no veremos la imagen entera).
Es útil cuando tenemos imágenes de diferentes tamaños o distintas relaciones de aspecto en la misma galería. Para indicar la relación de aspecto, podemos usar las clases mencionadas en el ejemplo de imágenes y figuras.
Ejemplo
Código del ejemplo
Ajustando la proporción con scale
Otra opción es usar la clase scale para las imágenes, que añadirá bandas a los
lados (o arriba y abajo) para coseguir que la imagen esté entera en el espacio disponible.
Ejemplo
Código del ejemplo
Galería flex fit con auto-modales
En este ejemplo final, se muestra una galería flex con imágenes fit y modales. Para saber más consultad el ejemplo de modales
Ejemplo
Código del ejemplo
Galería con imágenes reales y modales
Con imagenes reales, puede no quedar bien la clase card
y es mejor que no tengan un borde o sombreado. Aquí se muestra un ejemplo
con modales, leyendas y descripciones. Juzgad vosotros mismos.
Ejemplo
Código del ejemplo
Más ejemplos
Para ver ejemplos con estilos para imágenes, filtros y modales, consultad los siguientes ejemplos: