2

I've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:

<!DOCTYPE html>
<html>
<head>
    <style>
    img {
        position: fixed;
        max-width: 100%;
        max-height: 100%;
        top:0;
        left:0;
        bottom:0;
        right:0;
        margin: auto;
    }
    </style>
</head>
<body>
    <img src="LARGE_IMAGE.jpg">
</body>
</html>
Keshan Nageswaran
  • 8,060
  • 3
  • 28
  • 45
Tom
  • 1,836
  • 4
  • 16
  • 30
  • @happymacarts do you mean `scale();`? `zoom` is an old IE style. – Michael Coker Jan 09 '17 at 16:57
  • @Tom why not just link directly to the image? Browsers scale it by default, and if you tap or pinch, it will zoom in full-res. – Michael Coker Jan 09 '17 at 16:58
  • @MichaelCoker Because I'm going to disable right-clicking on the image as well, and that's only possible if the image is styled within HTML markup. – Tom Jan 09 '17 at 17:09

1 Answers1

0

You should make width on viewport. Device width wouldn't change after that anyway.

Kairat Kempirbaev
  • 166
  • 1
  • 12