Imágenes

Una serie de estilos para imágenes de contenido, tanto miniaturas como imagen con pie y cabecera con imagen.

Contenido

• Imágenes Centradas y Redimensionadas Respecto a su Contenedor
• Imágenes con pie
• Imágenes de fondo

Imágenes Centradas y Redimensionadas Respecto a su Contenedor

Estilos para imágenes tipo thumbnail, independientemente del tamaño final de la imagen y del contenedor, se ajustarán sin deformarse y serán centradas.

Se ofrece en tres tipos de proporciones: cuadrado (por defecto), horizontal y vertical.

La clase por defecto para el contenedor es .img-wpr. Además, para garantizar su correcta presentación en navegadores antiguos, se debe añadir a éste alguna de las siguientes clases: .img-wpr--horizontal o .img-wpr--vertical cuando su proporción así lo requiera.

Para la imagen, la clase siempre será .img-wpr__cover.

<div class="col-md-12">
  <div class="img--y col-xs-12 col-md-4">
    <div class="img-wpr img-wpr--vertical">
      <img class="img-wpr__cover" src="..." alt="Texto alternativo" />
    </div>
  </div>
  <div class="img--y col-xs-12 col-md-4">
    <div class="img-wpr img-wpr--horizontal">
      <img class="img-wpr__cover" src="..." alt="Texto alternativo" />
    </div>
  </div>
  <div class="img--y col-xs-12 col-md-4">
    <div class="img-wpr img-wpr--horizontal">
      <img class="img-wpr__cover" src="..." alt="Texto alternativo" />
    </div>
  </div>
</div>

Imágenes con pie

Los estilos para imagen con pie se pueden aplicar a las etiquetas figure y figcaption o a div. Al contenedor de la imagen se añade la clase .img-figure, y al pie la clase .img-figcaption.

Como muestra el ejemplo a continuación, dentro del elemento .img-figcaption podemos añadir helpers como son .float-left y .float-right donde podemos incluir contenido como fechas y enlaces a redes sociales.

<figure class="img-figure">
  <img src="..." class="xx-figure" alt="Texto alternativo" aria-describedby="img-figcaption1" />
  <figcaption class="img-figcaption">
    <div class="float-left" id="img-figcaption1">
      11/02/2016 <br>  Lorem Ipsum
    </div>
    <div class="float-right">
      ...
    </div>
  </figcaption>
</figure>

Imágenes de fondo

Para usar imágenes de fondo se puede añadir un div adicional dentro de la misma estructura detalla en Imágenes Centradas y Redimensionadas Respecto a su Contenedor . Aplicando la clase .img-wpr__contents se consigue crear una capa donde se puede incluir contenido utilizando otras estructuras de GEF. Además utilizando la clase modificadora .img--tint en el elemento .img-wpr se consigue crear una trama de tintado con transparencia que se situará entre la imagen y el contenido.

Quisque ac mattis ipsum

Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.

<div class="img-wpr img--y img-wpr--horizontal img--tint">
  <img class="img-wpr__cover" src="..." alt="Texto alternativo"/>
  <div class="img-wpr__contents">
    <h1 id="img-wpr__contents1" class="inverse">Quisque ac mattis ipsum</h1>
    <p id="img-wpr__contents11" class="inverse">Aliquam quis lacus fermentum, tempor massa eu, tincidunt ligula. Mauris eget ultrices lacus, ut tincidunt felis.</p>
  </div>
</div>