CODEWITHSUNDEEP
htmlcssflexbox
Ekaterina Chistyakova
Ekaterina Chistyakova

Reputation: 39

keeping div height with img when resizing the screen

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:

rendered output

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?

Upvotes: 0

Views: 42

Answers (1)

HamiD
HamiD

Reputation: 1090

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>

Upvotes: 1

Related Questions