keeping div height with img when resizing the screen

Question

I have a div for slick slider, product card to be exact.

It should be displayed inline, and picture should be the whole size of the card-info.

 .product-card__item { display: flex; width: 100%; min-height: 450px; }.product-card__item-preview { flex-basis: 48.5%; height: 100% width:100% }.product-card__img { width: 100%; height: 100%; object-fit: cover; }.product-card__item-info { width: 51.5%; background-color: #fff; padding: 1.2em; } }

 ``` <article class="product-card"> <div class="product-card__preview"> <img class="product-card__img" src="https://via.placeholder.com/150" alt=""> </div> <div class="product-card__info"> <div class="product-card__info-top"> <a class="product-card__title" href="#"> One Page Resume Template </a> <div class="product-card__author"> <img class="product-card__avatar" src="https://via.placeholder.com/50" alt="user avatar"> <a class="product-card__top-name" href="#"> AazzTech </a> </div> </div> </div> </article>

but with even slightly resizing the window for adaptation, picture starts doing this:

I know it could be fixed easily if I make amg as a bg for preview div, but how is it possible with img tag?

Answer 1

I dont have your code, but you can try this:

 .container{ display:flex; height:500px; }.container > div{ flex: 1 1 0; overflow:hidden; }.second img{ height:100%; }.first{ background-color:red;

 <div class="container"> <div class="first"></div> <div class="second"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Shaqi_jrvej.jpg" alt=""> </div> </div>