How to Make my Image Stretch All the Way?

Question

I'm styling the home page of my website; I want the image (see photo below) to stretch all the way below the header. Is there any way I can do that?

Here's my index.pug file code:

extends _component/layout/layout

block super-config
    -
        var active = '/'

block awesome-content
    .img
        img(src="/asset/image/pink-computer.jpg")

And here's my style.scss file code:

.img {
    
}

Thanks!

Answer 1

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

You can use this code absolutely, but the content you place after this div will appear below the image

There is also another method, you can call it as background-image

  img{
        background-image:  example.jpg;
        background-size: cover;
    }

If you want the next content to appear on the above of the image, then set it as background-image.