A Post with Images

May 22, 2013

Reading time ~1 minute

Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use figure with the appropriate class. Each instance of figure is auto-numbered and displayed in the caption.

Figures (for images or video)

One Up

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr.

Two Up

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
    <img src="/images/image-filename-1.jpg" alt="">
    <img src="/images/image-filename-2.jpg" alt="">
    <figcaption>Caption describing these two images.</figcaption>
</figure>

And you'll get something that looks like this:

Two images.

Three Up

Apply the third class like so to display three images side by side that share the same caption.

<figure class="third">
    <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
    <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
    <a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
    <figcaption>Caption describing these three images.</figcaption>
</figure>

And you'll get something that looks like this:

Three images.
comments powered by Disqus

Aylik 2.5 Dolara Bedava Kontrol Paneli ile VPS Nasil Alinir?

Aylik 2.5 Dolara Bedava Kontrol Paneli ile VPS Nasil Alinir? başlık gayet açık sanırım. soru ilginç, cevabı ise ilgi çekici ve önemli. ve be&hellip;… Continue reading

Testing Readability with a Bunch of Text

Published on May 22, 2012

Post with a Background Image

Published on October 27, 2013