Prevent hero image from stretching on larger screens - html

Question

I need help preventing my hero image from stretching on larger screens. It's probably a simple fix but I can't seem to make it happen.
It works fine when I make the screen smaller and on mobile as it reduces with flexbox.
Here's a screenshot of the image:
.hero {
width: 100%;
height: 360px;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1000;
/* padding: 20px 50px; */
padding-bottom: 10px;
gap: 50px;
/* background-image: url('../images/elvis.jpeg'); */
/* opacity: 50%; */
}
.movie-details {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
z-index: 1000;
padding: 20px;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
}
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
}
h1 {
padding-top: 20px;
font-size: 30px;
}
p {
font-size: 14px;
}
<div class="hero">
<div class="bg-image">
<img src="https://via.placeholder.com/800" class="banner-img" />
</div>
<div class="movie-details">
<h1>Movie Title</h1>
<p>Movie overview.</p>
</div>
</div>

Answer 1

Add object-position to .banner-image to control the image's anchor point around which it scales. I think you probably want object-position: center top; or maybe object-position: left top;
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
object-position: center top;
}
(Original Answer)
Add a `max-width` and set horizontal margins to `auto` to center it.
.hero {
max-width: 800px;
margin: 0 auto;
}