Как правильно разместить изображение внутри div блока, чтобы оно соответствовало его размерам?

Чтобы изображение соответствовало размерам div блока, можно использовать следующий CSS код для div блока:

```css
div {
  width: 100%;
  height: auto;
}

div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
```

Таким образом, div блок будет занимать 100% ширины родительского контейнера, а высота будет автоматически рассчитываться в зависимости от пропорций изображения. Изображение внутри div блока будет занимать 100% ширины и высоты, и при этом сохранять свои пропорции благодаря свойству `object-fit: contain`.

Чтобы исправить проблему с установкой баннера на главной странице сайта так, чтобы изображение было полностью видно при сохранении высоты баннера 300px, можно воспользоваться следующим CSS кодом:

```css
.banner {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
```

В данном случае `.banner` является классом для div блока с баннером. Устанавливаем ему фиксированную высоту в 300px и добавляем `overflow: hidden`, чтобы скрыть обрезанную часть изображения. Внутри этого блока изображение будет занимать 100% ширины и автоматически рассчитывать высоту, сохраняя свои пропорции. Свойство `object-fit: cover` гарантирует, что изображение заполнит блок баннера полностью, обеспечивая его видимость без искажений.

Если проблема с обрезкой изображения остается на ПК версии сайта, то возможно стоит найти изображение с другим соотношением сторон, чтобы оно лучше соответствовало размерам баннера.