My website features a full viewport image as the background beneath the Nav Bar.
I am looking to achieve a specific effect on mobile where the image is zoomed in and centered without distortion, allowing some of it to still be visible as a background. The mockup below illustrates what I am trying to convey:
https://i.sstatic.net/HXqn4.png
In this illustration, the red outline represents the original image boundary, while the blue area signifies the mobile viewport. I want the image to appear "cropped" or zoomed in on mobile devices. How can I achieve this using CSS? Thank you
Edit: To clarify my attempts so far, traditional methods like background-size: cover and background-position: center have not yielded the desired result. I am currently working with a React Bootstrap Carousel that requires styling adjustments for the <img> attribute instead. It seems like the background-size/position attributes only affect the <html> tag's style, leading to challenges in implementing suggestions based on my experience.
For instance, I have implemented the following code in my homepage.scss:
.fullImage {
background-position: center;
background-size: cover;
}
And then applied it to the image within the Carousel component:
<Carousel.Item interval={5000}>
<img
className="fullImage"
src="/images/home/banner/img1.jpg"
/>
</Carousel.Item>
However, the desired effect on mobile remains elusive, resembling something closer to the middle image in this visual representation:
https://i.sstatic.net/Te3uT.jpg
The ultimate goal is to have a fixed-sized, "zoomed-in" view of the image on smaller screens, without any scrollable elements outside the viewport.