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 browser 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?

  • jQuery .each css is not a function
  • Javascript change innerhtml causing flickering
  • How to select each selector using this keyword, when multiple selectors were used?
  • How do I get the opacity of an element using Javascript?
  • Connecting repeatable and non-repeatble backgrounds without a seam
  • Using bootstrap, wrapping input text element in label causes input text to bold and not take up full width
  • Clicking Child Component closes the list that is opened
  • jquery to change style attribute of a div class
  • How does the data-toggle attribute work? (What's its API?)
  • If section has class active then add it's id to body as a class?
  • position fixed not working on sticky menu
  • How do I shrink a div using its center as reference point in jQuery?
  • 2 Solutions collect form web for “How do you show an image larger than the browser window without scrollbars and retain the whole image?”

    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! 😀

    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.