Görseller

<img> resim etiketini kullanırken, genişlik ve yüksekliği belirtmeniz önerilir. Ayrıca erişilebilirlik için alternatif bir başlık belirtin.

Basit görsel

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

Açıklamalı görsel

<figure>
  <img src="example.jpg" width="1280" height="720" alt="metin"/>
  <figcaption>Resim açıklaması</figcaption>
</figure>

Görüntü hizalama

<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"/>

Açıklama ile hizalama

Görselin bir açıklaması varsa <figure> etiketinde alignleft, alignright veya aligncenter sınıfı kullanılmalıdır. <img> etiketindeki sınıfı kullanmayın:

<figure class="aligncenter">
  <img src="example.jpg" width="400" height="300" alt="metin"/>
  <figcaption>Resim açıklaması</figcaption>
</figure>

Arka plan görüntüsü

Aşağıda gösterildiği gibi has-cover sınıfını kullanarak açıklamalı bir görüntüyü metin içeren bir arka plana dönüştürebilirsiniz:

<figure class="has-cover">
  <img src="example.jpg" width="1280" height="720" alt="metin"/>
  <figcaption>Resim açıklaması</figcaption>
</figure>