Как сделать изображение на всю площадь контейнера

Question

Как можно сделать так что б img занимал всю площадь div?

<div class="block">
    <img src="assets/content-image-2.jpg" alt="image-2">
</div>

background не подходит

Answer 1

можно еще в сторону object-fit посмотреть

https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

.block {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.block img {
  width: 100%;
}

<div class="block">
    <img src="https://cdnimg.rg.ru/img/content/163/15/10/Depositphotos_213571854_m-2015_d_850.jpg" alt="image-2">
</div>

Answer 2

.block{
   position: relative;
   width: 200px;
   height: 200px;
   overflow: hidden
   
}

.block img{
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  left:0;
  top: 0;
}

<div class="block">
    <img src="https://masyamba.ru/%D0%A1%D0%9D%D0%95%D0%93%D0%9E%D0%92%D0%98%D0%9A%D0%98/77-%D1%81%D0%BD%D0%B5%D0%B3%D0%BE%D0%B2%D0%B8%D0%BA_%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8.jpg" alt="image-2">
</div>

БЛОГ НА HUSL

Как сделать изображение на всю площадь контейнера

Ответы (2 шт):