Diptych layout

2 x Photo + Placement + Size + Fit + Spacing
with simplest html markup ever.

Start guide See how it's done

Diptych page

By default, diptych page occupies whole browser window. Item align is relative to browser window.

View example
 Diptych page is defined with <figure> element: 
<figure>
    <img src="photo-1.jpg"/>
    <img src="photo-2.jpg"/>
</figure>
View example
 Diptych page size set to fixed value (960px): 
<figure self="size-large">
    <img src="photo-1.jpg"/>
    <img src="photo-2.jpg"/>
</figure>
View example
 Diptych page sized to two thirds of browser width: 
<figure self="size-2of3">
    <img src="photo-1.jpg"/>
    <img src="photo-2.jpg"/>
</figure>
View example
 Diptych items spacing: 
<figure layout="spacing-3" self="size-2of3">
    <img src="photo-1.jpg"/>
    <img src="photo-2.jpg"/>
</figure>
View example
 Diptych items sized relative to each other — left item is 2 times larger: 
<figure layout="spacing-3" self="size-2of3">
    <img src="photo-1.jpg" self="size-x2"/>
    <img src="photo-2.jpg"/>
</figure>
View example
 Items with golden ratio relationship — 8/5: 
<figure layout="spacing-3" self="size-2of3">
    <img src="photo-1.jpg" self="size-x8"/>
    <img src="photo-2.jpg" self="size-x5"/>
</figure>
View example
 Items with golden ratio relationship and custom vertical align: 
<figure layout="spacing-3">
    <img src="photo-1.jpg" self="size-x8 bottom"/>
    <img src="photo-2.jpg" self="size-x5 top"/>
</figure>

Wrapped diptych

Diptych occupies space available by wrapper element. Item align is relative to wrapper.

View example
 Second item vertical align set to top: 
<figure self="size-3of4">
    <figure layout="spacing-3">
        <img src="photo-1.jpg" self="size-x8"/>
        <img src="photo-2.jpg" self="size-x5 top"/>
    </figure>
</figure>
View example
 Second item vertical align set to center: 
<figure self="size-3of4">
    <figure layout="spacing-3">
        <img src="photo-1.jpg" self="size-x8"/>
        <img src="photo-2.jpg" self="size-x5 center"/>
    </figure>
</figure>
View example
 Second item vertical align set to bottom: 
<figure self="size-3of4">
    <figure layout="spacing-3">
        <img src="photo-1.jpg" self="size-x8"/>
        <img src="photo-2.jpg" self="size-x5 bottom"/>
    </figure>
</figure>
View example
 Golden ratio and vertical align variation: 
<figure self="size-3of4">
    <figure layout="spacing-3">
        <img src="photo-1.jpg" self="size-x5 bottom"/>
        <img src="photo-2.jpg" self="size-x8"/>
    </figure>
</figure>

Items fit

View example
 Images are scaled to fit within diptych items: 
<figure>
    <img src="photo-1.jpg" fit="contain"/>
    <img src="photo-2.jpg" fit="contain"/>
</figure>
View example
 First image is scaled to fit and second to cover diptych item: 
<figure>
    <img src="photo-1.jpg" fit="contain"/>
    <img src="photo-2.jpg" fit="cover"/>
</figure>
View example
 Both images cover diptych items: 
<figure>
    <img src="photo-1.jpg" fit="cover"/>
    <img src="photo-2.jpg" fit="cover"/>
</figure>
View example
 Cover transformation point set to left for second item: 
<figure>
    <img src="photo-1.jpg" fit="cover"/>
    <img src="photo-2.jpg" fit="cover left"/>
</figure>
View example
 First item is two times larger: 
<figure>
    <img src="photo-1.jpg" self="size-x2" fit="cover"/>
    <img src="photo-2.jpg" fit="cover left"/>
</figure>
View example
 Dark skin, second item as wrapper with half sized, centered image: 
<figure skin="dark">
    <img src="photo-1.jpg" fit="cover"/>
    <div self="size-x2">
        <img src="photo-2.jpg" self="size-1of2 center"/>
    </div>
</figure>

How it's done

Diptych guidelines:

Related: