Как спозиционировать картинку внутри div?

Question

[denism300]

Есть такой блок:

<div class="banner-wrapper">
    <img src="/img/main-page-banner.jpg">
</div>

.banner-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
}
.banner-wrapper>img {
    width: auto;
    height: 390px;
}

картинка имеет исходные размеры 1140х490
как спозиционировать ее так, чтобы при любой ширине экрана было что-то типа такого:

Comments

[ThunderCat]

в чем смысл? Чтобы картинка была видна максимально при любом размере?

[denism300]

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

[ThunderCat]

denism300, background-size: cover и нужный позишн

Answer 1

[Александр]

object-fit

Answer 2

[CortezEmilioCardinal]

Можно заднюю картинку(то есть твой background) задать как
.banner-wrapper {
background-image: url(images/bg.jpg); /* Путь к фоновому изображению */

}

А ту картинку, что в блоке ,задать как img в HTML