Sizing Div Based on Window Width

Set div width equal to window size

If you have the div width in px format it wont be responsive.
It has to be in % format. If you put the inner content as width:100% The inner content will have a width of the '.container'.

So in order to get the inner div to be the window width you should have the .container to be equal to the window width.

CSS:

.container{
   width:100%;
}

Or if you want we can use jQuery:

 var w = $(window).width();
 $('.content').css('width', w);

How to change height of DIV based on window size

When you set a specific height on an image it will always stay that height regardless of browser resize
When you set a specific height on a "container" or an element surrounding your image, your image will be constricted to that containers dimensions.(generally speaking)

You will need to remove your height: 400px if you wish for the image to resize.

Note: Your image will only 'grow' to its natural size. So if you have an image that is 200px high and 200px wide thats as big as it will get(without altering picture).

Also... If you must have at LEAST 400px height on your image - try using

image{
  min-height: 400px;
}

This is basically just setting your image so that the very smallest height that it can be is 400px;

If you want your image to grow dynamically with browser resize there are several ways to accomplish that. Check out this tutorial
http://css-tricks.com/perfect-full-page-background-image/

Resize div height based on screen width

you can use media queries. Which you can define styles for different screen sizes.

@media only screen and (max-width: 500px) {
    header {
        height:600px;
       }
 }

Scaling a div with window size

The issue is these two lines of code:

height: 200px;

width:971px;

When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.

Here are two quick references that I hope may be helpful.

http://www.w3schools.com/cssref/css_units.asp

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

To fix it you might do something like this:

height: 100em;

width:486em;

(Don't use my exact values of course.)

EDIT:
Alternatively it may be good to use a percentage like this:

width: 971px;
max-width:100%

EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:

height:auto;

CSS: How to set the width and height dependent on the screen/window size?

There are units displaying elements depending to the screen : vh and vw

vh : means viewport height.

ie : height:50vh; will take 50% height of the screen ( and not of the parent element ).

vw : means viewport width.

ie : width:50vw; will take 50% width of the screen ( and not of the parent element ).

Set a css property to screen width using css

Try width: 100vw; or as the above comment suggests, width: 100%;.

You may also want to set the meta tag in the HTML if it applies:

<meta name="viewport" content="width=device-width, initial-scale=1">

Edit:

If the <div> isn't fitting 100% of the screen width, perhaps you need to have the default margin/padding reset:

*, :before, :after {
    box-sizing: border-box; // habit
    margin: 0;
    padding: 0;
}