Prevent hero image from stretching on larger screens

Gavin Walsh 0
Viewed 27

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:

enter image description here

enter image description here

.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>

reactjs css html
1 Answers

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;
}
ray hatfield0
Related