Resizing images to fit the screen

Question

I'd like to know how to auto resize an image depending on the screen size of the device.

My image is too big and make my web page extend with it...

.gris {
  height: 100%;
  left: 20%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition-duration: 0.2s;
  width: 100%;
  z-index: -10;
}

<div class="gris">
  <img src="https://pngimage.net/wp-content/uploads/2018/06/image-noir-png.png">
</div>

Possible duplicate of [How to resize an image to fit in the browser window?](https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window) — Andrew Morton, Apr 10 '19 at 14:45
I made you a snippet. Your transparency makes the image invisible. Please change the html and image to a [mcve] - you can get images at lorempixel or placeholder.com — mplungjan, Apr 10 '19 at 14:48

score 2 · Answer 1 · answered Apr 10 '19 at 14:46

You need this:

.gris img {
  width: 100%;
  height: auto;
}

This will fill up the width, and keep the aspect ratio. However make sure you don't put small images, because in that case it will scale up (stretch it up). In that case you may need this:

.gris img {
  max-width: 100%;
  height: auto;
}

And don't set the width!

score 0 · Answer 2 · answered Apr 10 '19 at 14:48

0

Have you tried targeting the img itself? Also, you have a position: absolute and left: 20% so that will through it off when resizing.

.gris img {
  width: 100%;
}

answered Apr 10 '19 at 14:48

Zachary

300
3
11

Resizing images to fit the screen

2 Answers2