How do I make an image shrink and grow according to re-sizing the browser.

Question

I want my image to be able to do this. https://metallica.com/

The 'metallica' image changes as you re-size the browser. Also I want to find a CSS ONLY solution if possible. I can though work with a php solution as well but prefer a css one. Any ideas how the metallica site does it are welcomed as well though.

 <header class="header-contain">
    <img src="images/Main_Image.png">
 </header>

 .header-contain img{
    width: 1349px;
    height: 430px;
 }

I know I haven't shown anything here to do what I want but I'm putting it there so there is something to work with. Also, the idea I want is to be able to size the image the full width of the screen at all times, just always centered and the full image appearing.

I'm relatively new to css as well. Thanks in advanced.

Answer 1

use

width: 100%;

to make your image take on the size of the element containing it. This way it will also shrink when you resize the window.

Answer 2

One method is to use a background image and set the CSS property background-size to "cover", keeping the background image sized to its container.

Using background-image , the container will have no height. So, provided that you know the proportions of the banner image, you can use padding to set the height of the container relative to its width.

 div#banner { background-size: cover; background-image: url('http://lorempixel.com/800/200/city/3/'); padding-top: 25%; /* Aspect ratio of 4:1, height is 1/4 of the width */ } 

 <div id="banner"></div> 

Answer 3

Look into the CSS units VW and VH

VW and VH can be used to set the absolute size of something in % of the view height or view width. Unlike % which is of the parent elm, vh/vw is ALWAYS tied to actual window size.