Imágenes

Al usar la etiqueta de imagen <img>, es recomendable especificar el ancho y alto. También especificar un título alternativo para mayor accesibilidad.

Imagen simple

<img src="example.jpg" width="400" height="300" alt="texto"/>

Imagen con descripción

<figure>
  <img src="example.jpg" width="1280" height="720" alt="texto"/>
  <figcaption>Descripción de la imagen</figcaption>
</figure>

Alineación de imagen

<img class="alignleft" src="example.jpg" width="400" height="300"/>
<img class="alignright" src="example.jpg" width="400" height="300"/>
<img class="aligncenter" src="example.jpg" width="400" height="300"/>
<img class="alignfull" src="example.jpg" width="400" height="300"/>

Alineación con descripción

Si la imagen tiene una descripción, se debe usar la clase alignleft, alignright, aligncenter o en la etiqueta <figure>. No usar la clase en la etiqueta <img>:

<figure class="aligncenter">
  <img src="example.jpg" width="400" height="300" alt="texto"/>
  <figcaption>Descripción de la imagen</figcaption>
</figure>

Imagen de fondo

Puedes convertir una imagen con descripcion en un fondo con texto, para ello se emplea la clase has-cover como se muestra a continuación:

<figure class="has-cover">
  <img src="example.jpg" width="1280" height="720" alt="texto"/>
  <figcaption>Descripción de la imagen</figcaption>
</figure>