Search code examples
javascripthtmlcss

How do I make an image full screen on click?

I'm making a gallery and I want each photo to go fullscreen when you click on it like this:

enter image description here

Currently, I have a click handler on each image that adds a class zoom to the clicked image. The CSS selectors I wrote only blow the image up and don't have it centered on the full page like in the example. Here is my code:

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-content: center;
  object-position: center;
  transition: transform ease-in-out 0.5s;
}

.zoom {
  z-index: 1;
  transform: scale(1.5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<body onload="getPics()">
    <div class="container">
      <h1>Photo Gallery</h1>
      <div class="gallery">
        <img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        /><img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        /><img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        />
      </div>
    </div>
  </body>

How can I change the zoom CSS so the image goes into a full screen mode?

Solution

  • It's difficult to do this with zoom - you have to calculate depending on the current viewport etc dimensions and reposition the image.

    Another way of doing it is by having an element that fills the whole viewport and has a high z-index but is normally not displayed. When the user clicks on an image it is set as the background of this large element, with background-size contain so it always exactly fits.

    In this snippet clicking on the enlarged image gets rid of it.

    function getPics() {} //just for this demo
const imgs = document.querySelectorAll('.gallery img');
const fullPage = document.querySelector('#fullpage');

imgs.forEach(img => {
  img.addEventListener('click', function() {
    fullPage.style.backgroundImage = 'url(' + img.src + ')';
    fullPage.style.display = 'block';
  });
});
    #fullpage {
  display: none;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-color: black;
}
    <body onload="getPics()">
  <div class="container">
    <h1>Photo Gallery</h1>
    <div class="gallery">
      <img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
      /><img src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e" />
    </div>
  </div>
  <div id="fullpage" onclick="this.style.display='none';"></div>