'CSS Image zoom-to-fill?

I have a website with a full viewport image like so

enter image description here

The background image takes up the entire container beneath the Nav Bar.

I want to make it so that on mobile, when I view the image, it's zoomed in/centered such that the image isn't distorted and I'm still able to see some of it as a background... I'm probably not explaining it properly, I'm not fluent in design, but I think this mockup speaks for itself

enter image description here

The red shows the original image boundary, and the blue is the mobile viewport. I want the image to be "cropped"/zoomed on mobile. How do I do this with CSS? Thanks

Edit: To clarify what I've tried, I don't believe I can use background-size: cover and background-position: center. My current setup is with a React Bootstrap Carousel. The Carousel component takes an <img> attribute, so I'm trying to modify the styling of the image. From what I've read, the background-size/position attribute only apply to the <html> tag's style, and it doesn't work based on my experience with attempting this suggestion.

For example, in my homepage.scss I have the following

.fullImage {
    background-position: center;
    background-size: cover;
}

And I apply it to the image in the Carousel

<Carousel.Item interval={5000}>
  <img
    className="fullImage"
    src="/images/home/banner/img1.jpg"
  />
</Carousel.Item>

Only for the effect on Mobile to look something like this:

enter image description here

where the intended effect is supposed to be something like the middle image, where the image isn't actually scrollable outside of the viewport and instead has a fixed size and "zoomed-in" view on a smaller screen.

htmlcssreactjsreact-bootstrapbootstrap-5


Solution 1:[1]

If you really need to keep the img element (without background-image), I would choose object-fit: cover. This solution works only in modern browsers.

* { margin: 0; } /* just some reset */
.header { height: 100vh; width: 100vw; overflow: hidden; }
img { width: 100%; height: 100%; object-fit: cover; }
<div class="header">
  <img src="https://picsum.photos/1920/1080"/>
</div>

However, ideally I would choose src-sets and replace the image for the mobile with the cropped one so that it does not load unnecessarily large.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions