0

See my example here - http://jsbin.com/kutobedo/1/edit

When you shrink the browser window, the image resizes correctly and maintains it's aspect ratio. However I want the image to always stretch to fill the screen, but in this case it never stretches beyond it's native resolution.

If I set width:100% instead of max-width. It will stretch the image to fit the width but if you shrink the window vertically, it will start to distort the image.

If I set height: 100% instead of max-height I get overflow/scrollbars instead.

So I'm a bit stuck! Please note the images will be of different aspect ratios and resolutions.

I suppose in the long run, this might not be a good idea as a 1024x768 image blown up on a 4k screen may look a little nasty. Still would like a solution for now though.

Fred
  • 4,729
  • 5
  • 26
  • 21

2 Answers2

1

Set image as background of a div & use background-size:cover;. This will stretch it to fill screen without losing aspect ratio, no matter what are image dimentions are.

demonofthemist
  • 4,081
  • 4
  • 26
  • 45
  • The image will need to be added dynamically, so do you think I should set image as background as an inline style? – Fred Apr 28 '14 at 15:06
1

With the property »cover« the image is scaled up to the entire background until the whole background is covered therewith. More at http://en.aufdemdach.org/css-en/css-center-background-images/

Example: 

body{
   background: url("http://lorempixel.com/g/1000/1000/") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
user3581850
  • 31
  • 2