How do you show an image larger than the browser window without scrollbars and retain the whole image?

I'd like to center an image in the browser window and apply a 3D transformation to it. This all works fine until the image is larger than the browser window, in which case I lose the parts of the image that would be off the screen, even though after the transformation, the entire image would fit in the brow开发者_Go百科ser window. I don't want to show scrollbars. If I make it a background image, I can transform the div, but I lose the parts of the image that would be off the screen if it was not transformed.

Is it possible to show an image larger than the browser window without getting scrollbars?

Have you tried using the CSS3 Background Size property?

You can read about it here. I believe that if you use the property

background-size:cover;

Along with it's webkit and moz-webkit, you should get the result you're looking for. Try it and let me know, and if not that link there should be useful.

Hope it helps! :D

I started from scratch with a small example and managed to get it working by using overflow: hidden; on a div that contained a div that contained the image.