[FIXED] How to crop an image and keep it's center when resizing the window

Issue

I have an image tag (containing a .png) that spans the width of my viewport. When I resize it I want it to be cropped with the png's center fixed on the center of the page, however it crops relative to its top-left point. The image is inside a as well

The image is part of a bootstrap carousel and it's supossed to be the promotional banner of a website. I've tried using the image as a background-image and it worked exactly as I wanted, but I'd prefer to use an image tag for this (acessibility and other control preferences). I've also tried the object-position property on CSS and it didn't work (I applied it to the image)

<div class="image-container">
    <img src="img/..." class="banner-image" alt="Banner image">
</div>

CSS

.image-container {
    height: 460px;
    overflow: hidden;
}

.banner-image {
    min-width: 100%;
}

This is a small image showing what I'm experiencing and the desired result: (I can't post it as an image, but I uploaded to imgur)

https://imgur.com/a/TrgAo0w

Solution

Flexbox can do that.

In this case, I've allowed overflow and made the image slightly transparent so you can see the behaviour of the image.

.image-container {
  height: 460px;
  //overflow: hidden;
  display: flex;
  width: 60vw;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: center;
}

.banner-image {
  opacity: .5
}

<div class="image-container">
  <img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image">
</div>

Answered By - Paulie_D

Answer Checked By - David Goodson (PHPFixing Volunteer)