'Need to advice applying vw unit as height to slider

I run woocommerce website and have a UI problem in product images slider.

If an image with a different Ratio is uploaded, the UI changes according to the height of the image.

GIF link -> https://imgur.com/a/xuFfUAS

The structure of my website is as follows.

<div calss="product">
    <div class="product-gallery large-7 col">
        <div class="image slider row">
            <div class="flickity-slider">
                <div class="image-slider"> image 1 </div>
                <div class="image-slider"> image 2 </div>
            </div>
        </div>
    <div class="product-description>
    </div>
</div>

To solve this problem, I tried to put the following CSS to fix the height of the slider.

.flickity-slider{
height:100vw;
}
.image-slider{
object-fit:contain;
object-position:center;
}

However, since the height of product-description is longer than the height of product-gallery large-7 col, the height of the slider is set to the height of product-description.

The image cannot be applied with @media or min-height because the image`s height changes depending on the visitor's device.

Can someone give me some advice to solve this problem?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions