0

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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;s=10" alt="thumbnail" /></picture>
        </div>
    </div>
    <!--<Card>-->
</div>

Thanks.

Jeremy
  • 59
  • 5

0 Answers0