Рабочий пример, как растянуть картинку на высоту соседнего блока - Web-Global: Связывая миры через веб-технологии

Рабочий пример, как растянуть картинку на высоту соседнего блока

Пост опубликован 6 июня 2021 в 16:42 и находится в рубриках HTML&CSS. 305
Поделиться:

CSS

// reset for img
img {
  max-width100%;
  heightauto;
  vertical-alignbottom;
}
 
.line {
  displayflex;
  justify-content: space-between;
  max-width768px;
  margin20px auto;
}
 
.left {
  flex0 1 calc(50% 10px);
  max-width: calc(50% 10px);
 
  .pic-holder {
    height100%;
  }
 
  .pic {
    width100%;
    height100%;
    object-fitcover;
  }
}
 
.right {
  flex0 1 calc(50% 10px);
  max-width: calc(50% 10px);
  displayflex;
  flex-direction: column;
  justify-content: space-between;
 
  .item {
    padding40px 20px;
    text-aligncenter;
    background-color#ccc;
    margin-bottom20px;
 
    &:last-child {
      margin-bottom0;
    }
  }
}

HTML

<div class=»line»>
<div class=»left»>
<div class=»pic-holder»>
<img src=»https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg» class=»pic» alt=»»>
</div>
</div>
<div class=»right»>
<div class=»item»>Item</div>
<div class=»item»>Item</div>
<div class=»item»>Item</div>
</div>
</div>

https://codepen.io/uzxan/pen/eYvrxrd