Altura fija

Seteamos un alto fijo al contenedor en el que se va a incluir el componente 'fluid-image'.

Github

Ejemplo con altura escalable

100px

Con Blur de fondo

    <a href="#" class="fluid-image">
    <span class="fluid-image__bg fluid-image__bg--blur" style="background-image: url('your-image-url')"></span>
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

Sin Blur de fondo

    <a href="#" class="fluid-image">
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

200px

Con Blur de fondo

    <a href="#" class="fluid-image">
    <span class="fluid-image__bg fluid-image__bg--blur" style="background-image: url('your-image-url')"></span>
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

Sin Blur de fondo

    <a href="#" class="fluid-image">
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

300px

Con Blur de fondo

    <a href="#" class="fluid-image">
    <span class="fluid-image__bg fluid-image__bg--blur" style="background-image: url('your-image-url')"></span>
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

Sin Blur de fondo

    <a href="#" class="fluid-image">
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

400px

Con Blur de fondo

    <a href="#" class="fluid-image">
    <span class="fluid-image__bg fluid-image__bg--blur" style="background-image: url('your-image-url')"></span>
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>

Sin Blur de fondo

    <a href="#" class="fluid-image">
    <img class="fluid-image__img" src="your-image-url" alt="">
    </a>