Flexible Images

Responsive images that keep their aspect ratio when the browser window is resized.

Resize the browser to see it in action!

paris

HTML

<figure class="image-container">
    <img class="flexible-image" src="/images/paris8.jpg" alt="paris" >
</figure>

Sass

.flexible-image { @include elr-flex-image; }

Circular Images

kitten
kitten
kitten

HTML

<figure class="round-image">
    <img src="/images/cat12.jpg" alt="kitten" >
</figure>

Sass

.round-image { @include elr-circle-image(300px); }

Rounded Images

kitten
kitten

HTML

<img class="rounded-image" src="/images/cat3.jpg" alt="kitten" >

Sass

.rounded-image {
    @include elr-rounded-image(10px);
    display: block;
}