Elementos

Imágenes

Puedes utilizar las imágenes dentro de las secciones de diferentes maneras.

En este framework tienes dos formas para estructurar las secciones de cada una de las páginas. Puedes crear rejillas (basadas en gridlayout) o bloques (que funcionan con flex).

Dentro de estas secciones puedes incluir texto, botones,... y ahora te explicamos como incluir imágenes.

TIPOS

ejemplo de organización por filas

Todo el ancho del contenedor

.img_ancho

Con esta clase tu imagen ocupará todo el ancho del contenedor donde se encuentre.

ejemplo de organización por columnas

El 50% del ancho del contenedor

.img_mitad

Con esta clase tu imagen ocupará la mitad el ancho del contenedor donde se encuentre.

ejemplo de organización por columnas

Imagen pequeña

.img_peque

Con esta clase tu imagen ocupará 100 píxeles.

ejemplo de organización por columnas

Imagen mediana

.img_mediana

Con esta clase tu imagen ocupará 300 píxeles.

ejemplo de organización por columnas

Imagen grande

.img_grande

Con esta clase tu imagen ocupará 500 píxeles.

¿Cómo uso las imágenes?

Es muy sencillo, solo tienes que añadir la clase que se ajuste a lo que necesitas a la imagen o copia el código a continuación. En el ejemplo hemos utilizado imagenes de Lorem Picsum pero puedes sustituirlas por las imágenes que quieras. Puedes utilizar cualquiera de las 5 clases: .img_grande | .img_mediana | .img_peque | .img_mitad | .img_ancho


<section class="columnacentrada">
    <img class="img_grande margenes-todos_mediano" src="https://picsum.photos/600" alt="Pon aquí una descripción que se corresponda con tu imagen">
    <img class="img_mediana margenes-todos_mediano" src="https://picsum.photos/600" alt="Pon aquí una descripción que se corresponda con tu imagen">
    <img class="img_peque margenes-todos_mediano" src="https://picsum.photos/600" alt="Pon aquí una descripción que se corresponda con tu imagen">
    <img class="img_mitad margenes-todos_mediano" src="https://picsum.photos/600" alt="Pon aquí una descripción que se corresponda con tu imagen">
    <img class="img_ancho margenes-todos_mediano" src="https://picsum.photos/600" alt="Pon aquí una descripción que se corresponda con tu imagen">

</section>

Así se ve el código de ejemplo

Pon aquí una descripción que se corresponda con tu imagen Pon aquí una descripción que se corresponda con tu imagen Pon aquí una descripción que se corresponda con tu imagen Pon aquí una descripción que se corresponda con tu imagen Pon aquí una descripción que se corresponda con tu imagen