Как разместить фоновое изображение баннера с помощью тега img вместо inline-css (положение центра изображения)

Обновлено: приведенное ниже решение работает только в Firefox; Кажется, я не могу заставить его работать в других браузерах. Я оставлю его пока, на случай, если он поможет людям в правильном направлении, но я удалю его, когда появится лучшее рабочее решение.

Просто разместите баннер в нужном месте.

.banner-one {
  height: 240px;
  display: inline-block;
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}

.banner-one img {
  height: 100%;
}

.banner-two {
  background-size: cover;
  background-position: center center;
  height: 240px;
  width: 100%;
}

@media (min-width: 768px) {
  .banner-one,
  .banner-two {
    height: 480px;
  }
}

@media (min-width: 1200px) {
  .banner-one,
  .banner-two {
    height: 680px;
  }
}

<div class = "banner-one">
  <img alt = "" src = "https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

<section>
  <div class = "banner-two" style = "background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>

Но вопрос в том, зачем вы это хотите. Вам нужно намного больше CSS, чтобы это работало! Мое чутье было бы просто скрыть img, а затем продолжить то, что вы делали с баннером-два. Я понимаю, что есть ограничения, с которыми вам нужно работать, поэтому я надеюсь, что это поможет!

.banner-one {
    width: 100%;
    height: 640px;
    display: flex;
    justify-content: center;
}
.banner-one img {
    max-width: 100%;
}

До сих пор вот код. Banner-flex не работает, так как изображение полностью центрируется. Banner-transform работает нормально. ссылка на примеры на codepen

Мне действительно интересно, есть ли способ сделать это, что можно было бы сказать лучше или эффективнее.

Спасибо еще раз !

<div class = "banner-flex">
  <img alt = "" src = "https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

<div class = "banner-transform">
  <img alt = "" src = "https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

.banner-flex {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
}
.banner-flex img {
   max-width: 100%;
}

.banner-transform {
 height: 240px;
 display: inline-block;
 position: relative;
 left: 50vw;
 transform: translateX(-50%);
 }

.banner-transform img {
  height: 100%;
}

@media (min-width: 768px) {
 .banner-flex,
 .banner-transform {
    height: 480px;
 }
}

@media (min-width: 1200px) {
.banner-flex,
.banner-transform {
    height: 680px;
 }
}

@media (min-width: 1800px) {
.banner-transform img {
    width: 100vw;
 }
}