How to stretch the image responsive to fill entire screen

Question

I want to know how can I extend the image to the part ([) marked in black. This is my code (I'm trying to make it responsive):

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: 100%;
}

<body>

  <div class="main">
    <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">
  </div>

</body>

What I have

I want to have something like this:

How do you want to rescale your image to fit the height? Do you want it to stretch? Do you want to resize with the same aspect ratio? More details have to be provided — Geeky Quentin, Jul 09 '22 at 02:41
Maybe [this post using viewport-percentage lengths](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window). Flexbox can also work with the parent having `flex-direction: column;` and the child with `flex-grow: 1;` I think — Anthony L, Jul 09 '22 at 02:46
yes, i want to resize with the same aspect ratio. I want the entire page to look like the second image — mochi, Jul 09 '22 at 03:00
As the image is not having the required height as the screen , it is not possible to attain the desired result. The best thing what i can suggest is , you want to keep the aspect ratio same . So for that, just align the image to the center of the screen . — krishnaacharyaa, Jul 09 '22 at 03:10

score 1 · Answer 1 · edited Jul 09 '22 at 15:18

Seems like you want to stretch the image for all screen views.

body {
  background: #aeddd5;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  img[data-width="1024"] {
    height: 100vh;
  }
  img[data-width="1440"] {
    height: 100vh;
  }
}

<div class="main">
  <img src="https://th.bing.com/th/id/OIP._HNl_Hk5V4UVNVikQTEvaQHaKb?pid=ImgDet&w=169&h=237&c=7" data-width="1024" data-height="768" />
</div>

score 1 · Answer 2 · edited Jul 09 '22 at 15:17

You can stretch the image with the object-fit property, add display: block to the image for eliminate the excess space left by the images for being inline elements and declared a size coverting all the page with the relative length units vh and vw

body {
  margin: 0;
}

img {
  display: block;
  object-fit: cover;
  height: 100vh;
  width: 100vw;
}

<div class="main">
  <!-- Example image -->
  <img src="https://pbs.twimg.com/media/EzueaqPVgAEIPgd?format=jpg&name=large">
</div>

score 0 · Accepted Answer · answered Jul 09 '22 at 03:15

Change height:100% to height:100vh and add object-fit:cover

body {
  background: #aeddd5;
  margin: 0;
}

.main {
  max-width: 900px;
  margin: auto;
}

img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}

<div class="main">
  <img src="https://picsum.photos/400/1200">
</div>

score 0 · Answer 4 · answered Jul 09 '22 at 03:36

HTML:-

<html>
<head>
<title>Your Title</title>
<style>
body{
    background: #000000;
}
.main{
  max-width:900px;
  margin: auto;
}
img{
  width:100%;
  height:100%;
  padding: 2%;
  background-color: #ffffff;
}
.outborder{
    background: #aeddd5;
    padding: 1%;
}
</style>
</head>
<body>
  <div class="outborder">
    <div class="main">
      <img src="./img/cf60903b8674148b9ab6ba194833fd2f_page-0001.jpg">   
     </div>
  </div>
</body>
</html>

I guess this should work out for you. I just made another division for the aqua color and changed the body color to black. Added some padding & color to image background.

How to stretch the image responsive to fill entire screen

4 Answers4