How To Responsivly Scale Image Height To The Height Of The Device

Question

On the front page of my website, i have an image which i want to fit the height of the screen/device, if the device height changes it should responsively reflect this by resizing ( not cropping). How do i achieve this?

I hope i've made sense, see this jsfiddle as an example to what i am trying to achieve.

Tried:

min-height:100%;
min-width:100%;

See http://stackoverflow.com/questions/12609110/responsive-css-background-images/12609315#12609315 — Andrei Volgin, Dec 10 '14 at 20:08
see http://css-tricks.com/perfect-full-page-background-image/, maybe it helps — maskacovnik, Dec 10 '14 at 20:09

score 1 · Answer 1 · answered Dec 10 '14 at 20:12

Try making it a background and use

 background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Source: http://css-tricks.com/perfect-full-page-background-image/

How To Responsivly Scale Image Height To The Height Of The Device

1 Answers1