Altura escalable

Utilizamos el elemento 'fluid-image__ratio' con una imagen de la proporción que queremos se expanda el alto del contenedor.

Github

Ejemplo con altura fija.

Ratio 1:1

Con Blur de fondo

<a href="#" class="fluid-image">
    <img class="fluid-image__ratio" src="img/1x1.png" alt="Square ratio">
    <span class="fluid-image__bg" 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__ratio" src="img/1x1.png" alt="Square ratio">
    <img class="fluid-image__img" src="your-image-url" alt="">
</a>

Ratio 2:3

Con Blur de fondo

<a href="#" class="fluid-image">
    <img class="fluid-image__ratio" src="img/2x3.png" alt="Square ratio">
    <span class="fluid-image__bg" 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__ratio" src="img/2x3.png" alt="Square ratio">
    <img class="fluid-image__img" src="your-image-url" alt="">
</a>

Ratio 4:3

Con Blur de fondo

<a href="#" class="fluid-image">
    <img class="fluid-image__ratio" src="img/4x3.png" alt="Square ratio">
    <span class="fluid-image__bg" 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__ratio" src="img/4x3.png" alt="Square ratio">
    <img class="fluid-image__img" src="your-image-url" alt="">
</a>

Ratio 16:9

Con Blur de fondo

<a href="#" class="fluid-image">
    <img class="fluid-image__ratio" src="img/16x9.png" alt="Square ratio">
    <span class="fluid-image__bg" 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__ratio" src="img/16x9.png" alt="Square ratio">
    <img class="fluid-image__img" src="your-image-url" alt="">
</a>