如何使图像的大小始终大于（或大于）浏览器窗口并固定到某个点

Question

I would like to know how to make an image rescale accordingly with the size of the browser window, similar to how these guys have their background video on the main page. I have something similar working for a video, but applying the same code on the image just won't work.

Having both the width and height of the image on 100% is not acceptable, since that will put the image out of proportions.

All help greatly appreciated!

that it is downright impossible for me to add a jsfiddle here, because in that case I would have to put my entire project in jsfiddle.

Answer 1

No JavaScript required.

You can do this using the various background CSS properties, namely background-size:cover; and background-position:center center; on an element with 100% dimensions, which will fill the browser if these are also defined for html and body and the element is a direct child.

Demo Fiddle

html, body, #img{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
#img{
  background-image:url(myImage.png);
  background-size:cover;
  background-position:center center;
}

Answer 2

if it's a background image (like in the example link), you can use:

background-size: cover;

Else if the img is in the HTML, you can give it a width of 100% indeed, but set the height to auto so it scales normally.

width: 100%;
height: auto