I am build a horizontal carousel; I want the thumbnails to maintain a 3/4 aspect ratio, I am currently using the css property aspect-ratio: 3/4; for this but as this is a new feature and isn't supported widely yet. I am looking for a alternative way to achive the same thing aspect-ratio does.
div.s-SQ5uwi2e7Wr- {
display: flex;
height: 200px;
overflow-y: hidden;
overflow-x: scroll;
}
.short-card.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
height: 100%;
margin: 0 5px;
}
.thumbnail.s-jeQbVeYbq5-Z.s-jeQbVeYbq5-Z {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3/4;
}
.thumbnail.s-jeQbVeYbq5-Z .image.s-jeQbVeYbq5-Z {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="s-SQ5uwi2e7Wr-">
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z">
<img class="image s-jeQbVeYbq5-Z" src="https://thumbs.dreamstime.com/b/double-aa-letters-logo-black-swoosh-double-aa-letters-logo-black-swoosh-vector-illustration-letter-180680952.jpg" alt="thumbnail" />
</picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
<div class="short-card s-jeQbVeYbq5-Z">
<div class="thumbnail s-jeQbVeYbq5-Z">
<picture class="s-jeQbVeYbq5-Z"><img class="image s-jeQbVeYbq5-Z" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSy_OgbXEmQB5Pw2B4alMgz-EQbsyuRaBzMIR9bF9ngEEkTY2ydnBQTb6RYwgjY&s=10" alt="thumbnail" /></picture>
</div>
</div>
<!--<Card>-->
</div>
Thanks.