How can I scale an image to exact viewport size?

Question

I'm quite new to Bootstrap and CSS, and I'm trying to make a home screen for my website. I want to make sure the image (intrinsic size 1920x1080) fits to the viewport exactly. Currently part of the image renders off screen and you have to scroll down to view the rest. This is not what I want to happen.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid" id="home">
  <img src="https://via.placeholder.com/1920x1080" class="img-fluid" alt="homeImg" id="homeImg">
</div>

Here is the code I am using.

I understand that the "-fluid" tag will make the image fill the width of the screen, and that the height of the image will be set to maintain the aspect ratio, but I just want the whole image to fill the screen.

It's probably quite simple but the answer eludes me and I'm struggling to find a solution online, hence the post here. If people were able to lend a hand, it'd be much appreciated.

You can display the image to fill the screen (height and width), but you cannot guarantee the aspect ratio. eg: mobile view vs desktop view. Does that work for your usecase? — kiranvj, Apr 11 '22 at 13:53
@kiranvj Yes, that's fine, the overflowing part of the image is small so I can't imagine the change in aspect ratio will be overly dramatic. Currently I'm only really concerned with desktop view (I know bootstrap is mobile first, but it's the library I'm most familiar with so I went with it for this project) — Luke Blaker, Apr 11 '22 at 13:54
You should probably be using a background image, but it's not clear what you're trying to do in general. You haven't said how the image should crop when necessary. See [Full-screen responsive background image](https://stackoverflow.com/questions/16548338/full-screen-responsive-background-image). — isherwood, Apr 11 '22 at 14:56

kiranvj · Accepted Answer · 2022-04-11T14:49:22.907

0

You can use a combination of height, background-size, background-position to accomplish similar behaviour.

Example (view in fullscreen)

.image-container {
  height: 100vh;
  background-image: url('https://dummyimage.com/1920x1080/000/fff.jpg');
  background-size: cover;
  background-position: center;
}


/* for stackoverflow container */

body {
  margin: 0;
}

<div class="image-container"></div>

If stretching is fine, try this

.my-image {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

<img class="my-image" src="https://dummyimage.com/1920x1080/000/fff.jpg" />

edited Apr 11 '22 at 14:49

answered Apr 11 '22 at 14:01

kiranvj

32,342
7
71
76

Thanks for the feedback! This has mostly worked, but unfortunately has cropped the image at the bottom (unless I view it in F11 fullscreen). Is there a way to avoid the crop altogether, or to make it crop the top of the image instead? – Luke Blaker Apr 11 '22 at 14:13
That's odd. No, I don't have anything else there, except for document set up, like linking style sheets, and the bootstrap library. There is this line, which I suppose may have something to do with it: – Luke Blaker Apr 11 '22 at 14:27
@LukeBlaker My bad, it does crop if the viewport is less than image height. Try `background-size: contain;` works for you – kiranvj Apr 11 '22 at 14:34
Thank you for that, it no longer crops, but now there's another problem: the image repeats itself left and right instead of stretching to fit, and as it's not designed to be a tileable image, there are some visible seams. Is there a way to fix this, or should I just edit the image itself to be tileable? – Luke Blaker Apr 11 '22 at 14:39
@LukeBlaker I have updated the answer with one more solution which stretches the image. In this case aspect ratio is not maintained. – kiranvj Apr 11 '22 at 14:50
@LukeBlaker if the image is being cropped in the wrong side then you can update `background-position` to set the position and crop the opposite side,so if you want to crop the top of the image set `background-position: bottom center;` – Martin Apr 11 '22 at 14:56

How can I scale an image to exact viewport size?

1 Answers1