JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<!-- 25% Height -->

<div class="img">
    <div class="img-dim" data-height="50">
        <div class="img-in">
            <img src="http://www.placehold.it/200x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="50">
        <div class="img-in">
            <img src="http://www.placehold.it/150x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="50">
        <div class="img-in">
            <img src="http://www.placehold.it/150x200" />
        </div>
    </div>
</div>



<!-- 50% Height -->

<div class="img">
    <div class="img-dim" data-height="100">
        <div class="img-in">
            <img src="http://www.placehold.it/200x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="100">
        <div class="img-in">
            <img src="http://www.placehold.it/150x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="100">
        <div class="img-in">
            <img src="http://www.placehold.it/150x200" />
        </div>
    </div>
</div>



<!-- 75% Height -->

<div class="img">
    <div class="img-dim" data-height="150">
        <div class="img-in">
            <img src="http://www.placehold.it/200x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="150">
        <div class="img-in">
            <img src="http://www.placehold.it/150x150" />
        </div>
    </div>
</div>

<div class="img">
    <div class="img-dim" data-height="150">
        <div class="img-in">
            <img src="http://www.placehold.it/150x200" />
        </div>
    </div>
</div>

SCSS

body {
    font-size: 0;
    margin: 0;
    padding: 0;
}

.img {
    background: blue;
    border: 1px solid blue;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
}

.img-dim {
    position: relative;
    width: 100%;
    &[data-height="50"]{
        padding-top: 50%;
    }
    &[data-height="100"]{
        padding-top: 100%;
    }
    &[data-height="150"]{
        padding-top: 150%;
    }
}

.img-in {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

img {
    width: 100%;
}