Image grow to screen size on click css/html-CodePudding

I want the images on this page to grow to screen size on click. At the moment when clicking the image grows to twice the size, but the image is growing past the screen size. Is there a way to make this responsive so that it grows to the size of the screen ?

Here is my html:

          <div data-tilt class="thumbnail rounded js-tilt">
            <img
              alt="Project Image"
              class="img-fluid"
              src="assets/skateboard.jpg"
              onnclick="enlargeImg()"
              id="img1"
            />
          </div>

This is my css:

img {
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
}

img:active {
    -webkit-transform: scale(2);
    transform: scale(2);   
}

CodePudding user response：

A possible solution would be the following:

HTML:

<img src="[YourSource]" id="MyImage" onclick="makeItFullscreen()"/>

CSS:

.fullscreen{
  height: 100%;
}

body, html {
  height: 100%;
  margin: 0;
}

Javascript:

function makeItFullscreen(){
    document.getElementById("MyImage").classList.add('fullscreen');
}

Here is a working example can be found here: https://jsfiddle.net/8qro5zae/22/

CodePudding user response：

In my code I use a class active and vanilla Javascript for check if the class exists or not and the function create a toggle on that class.

The css of active class fill the screen with the image centered and proportionaly.

function enlargeImg(id) {
  let img = document.getElementById(id);
  if (img.className.match(/\bactive\b/)) {
    img.classList.remove("active");
  } else {
    img.classList.add("active");
  }
}

img {
  position: relative;
}

img.active {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  object-fit: contain;
}

<div data-tilt class="thumbnail rounded js-tilt">
  <img alt="Project Image" class="img-fluid" src="http://placekitten.com/g/200/300" onclick="enlargeImg(this.id)" id="img1" />
</div>

<div data-tilt class="thumbnail rounded js-tilt">
  <img alt="Project Image" class="img-fluid" src="http://placekitten.com/g/300/200" onclick="enlargeImg(this.id)" id="img2" />
</div>