Как заполнить блок div картинкой img без background?

Чтобы заполнить блок изображением без использования свойства background-image, можно воспользоваться свойством object-fit в комбинации с установкой width и height на 100%. Это позволит подогнать изображение под размеры блока без использования фона.

Пример кода:

<div class="wrapper">
  <img src="/path/to/your/image.jpg" alt="Изображение" class="image">
</div>

Стили:

.wrapper {
  width: 300px;
  height: 300px;
  border: 5px solid #515151;
}
.image {
  object-fit: cover; /* Или contain, в зависимости от желаемого эффекта */
  width: 100%;
  height: 100%;
}

Здесь object-fit: cover гарантирует, что изображение будет масштабировано таким образом, чтобы полностью заполнить блок без образования полей, сохраняя при этом пропорции изображения. Если вы хотите, чтобы изображение сохраняло свои пропорции и могло выходить за границы блока, используйте object-fit: contain.

Доступные значения:

• fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
• contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
• cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
• none — картинка отображается без изменения пропорций или размеров.
• scale-down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом.

На мой взгляд, самым полезным среди доступных значений является cover. Оно позволяет элементам <img> и <video> вести себя подобно фоновым изображениям.