-1

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.

danielschnoll
  • 3,045
  • 5
  • 23
  • 34
  • 1
    I am not sure if I understand your question correctly so just to be sure: `background-size: cover` and `background-position: center` do not achieve what you want? – Jax-p Mar 14 '22 at 16:25
  • I should've clarified what I've tried so far. From what I've read/attempted, the background-size/position attribute only apply to the `` style. I have the images on a Bootstrap Carousel, and the component takes an ``. So I'm attempting to apply this styling to `` and I haven't had much success – danielschnoll Mar 14 '22 at 16:30

1 Answers1

0

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.

Jax-p
  • 7,225
  • 4
  • 28
  • 58
  • `src-set` only chooses between pre-specified images. My concern is that it won't scale "dynamically" unless I have a lot of images to pick from. I can try your suggestion though and get back to you on that – danielschnoll Mar 14 '22 at 16:46
  • This didn't work either, I tried `.homeBanner{ height: 100vh; width: 100vw; overflow: hidden; } .fullImage{ width: 100%; height: 100%; object-fit: cover; }` and applied `` and ` – danielschnoll Mar 14 '22 at 17:17
  • Well it's hard to debug something what we can't run but as you can see attached example works fine. – Jax-p Mar 15 '22 at 11:51