keeping div height with img when resizing the screen - html

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>