Image Viewer - toggle between thumbnail and full size

Question

One code sample code sample show a image at its original size with scrollbars while the other proportionally scales the image to fit inside it parent.

I want to initially show the image proportionally resized and after the user does something (click, hover, etc...) the image is shown at full size with scrollbars. When the user stops doing an action the image returns.
Essentially what I want to do is toggle between the two states without messing up the page's layout.

My images can be both landscape and portrait in nature with dimensions of up to 5184 pixels to show detail, although most are cropped to 2500 to 4100.

Restrictions:

1. No scripts of any kind are permitted - they will be stripped out.

2. No <a> links permitted - they will be stripped.

3. No active content of any kind - will be stripped out.

4. I cannot insert the actual widths and heights of images into the <img> tag as I am using a program to generate a html template and it does not have access to those dimensions.

5. I'd like the divisions in which the images are seen to resize to the user's screen, thus the 96vh code above (not sure if this is the right technique).

So far I have tried using various schemes using divisions with a hidden checkbox toggle and have tried using a <ul> list, but I can't seem to get everything to work correctly. I typically can get one version of the image to work, but it typically breaks how the other version of the image is viewed or worse yet, it messes up the page layout.

Show image at full size with scrollbars inside division:

<center>
  <div class="gsimagewrapper">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">
  </div>

  <div class="gsimagewrapper">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773167-95809.jpg">
  </div>
</center>

.gsimagewrapper {
  position: relative;
  width: 96vw;
  height: 96vh;
  overflow: auto;
  margin: 1vh 0px;
  padding: 0px;
  box-sizing: border-box;
}

.gsimage {
  max-width: none;
  height: auto;
}

Show scaled down version of image inside division:

.gsimagewrapper {
  position: relative;
  width: 96vw;
  height: 96vh;
  overflow: auto;
  margin: 1vh 0px;
  padding: 0px;
  box-sizing: border-box;
}

.gsimage {
  width: 100%;
  height: auto;
}

Answer 1

Inspired by this answer: Can I have an onclick effect in CSS?

You can try to use a checkbox as a button. This is the JSFiddle: https://jsfiddle.net/sxpgvj6z/

HTML

<center>
<div class="gsimagewrapper">
  <input type="checkbox" id="btnControl"/>
  <label class="btn" for="btnControl">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">  
  </label>
</div>  
</center>

CSS

#btnControl { display: none; }

.gsimagewrapper { position: relative;   width: 96vw;   height: 96vh; overflow: auto;   margin: 1vh 0px;   padding: 0px;   box-sizing: border-box; }

.gsimage {   max-width: none;   height: auto; }

#btnControl:checked + label > img {
    width: 100%;
    height: auto; 
}