如何使此横幅滑块适合浏览器高度？

Question

I googled for 2 days trying to understand how the auto height fit works, I think I understand in how to make a background fits the browser, but with this banner slider, I don't have a clue.

Could someone please enlighten me on where should I look for/start? Should it be a CSS or JS ?

I'm very new to HTML5/CSS3 , Wordpress gave me a very easy environment to start a website, but I just barely know how to modify a website other than a plugin.

It would be very cool if the slider section to fit like this one below

Thanks in advance!

Answer 1

This should set the image/album you have on the homepage to be the height and width of the browser, tweak some of the CSS and it should line up with the Sidebar perfectly like you wanted.

  img {
        max-width: 100%;
        height: auto;
        width: auto\9;
    }

Answer 2

If you are looking for the image that fits the browser height regardless of any display then you can use 'vh' unit from this css units page.

vh means viewport height[viewport = the browser window size.], and 1vh = 1% of the height of viewport, so in your case you can use 100vh for image like this:

img{
  height: 100vh;
}

Check this jsfiddle for the same.

Remember that you need high-resolution images and those images will not look good on mobile devices.