Demos Orientation

A very exciting yacht race. — This demos shows a responsive iamges being adapted to orientation changes.

HTML

<picture>
<source media="(orientation: portrait)" src="img/yacht_race@portrait.jpg">
<source media="(orientation: Landscape)" src="img/yacht_race@Landscape.jpg">
<!-- fallback img if picture is not supported -->
<img src="img/yacht_race@fallback.jpg" alt="A very exciting yacht race.">
<!-- alternate text -->
<p>A very exciting yacht race.</p>
</picture>

Credits

Author: Andreas Klein / @ixisio

Hosting and bandwidth for these demos is provided by CDNConnect.com