JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-ratio">
    <div class="container-inner">
        <a class="block" href="#1">
          <img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">   
        </a>
        <a class="block" href="#2">
            <img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
        </a>
        <a class="block" href="#3">
            <img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
        </a>
    </div>
</div>

CSS

.container-ratio {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;
}
.container-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;
}
.block {
    font-size: 0;
}
.block img {
    height: 100%;
    margin-right: 1%;
}