The browser will then automatically scale the image to fit onto the screen. But as from the screenshot above, we will run into a “not properly fitted” problem on the portrait orientation. This is why I will recommend using the background-image property for full-screen images, as it offers more controls.

FROM HTML TO CSS

THE RESULT

In this version, we have simply removed the HTML  tag, and used the background-image property on the container instead. While it does fill up the entire screen now, it is still not so nice with repeating images, and we need to do a little more work on it.

CONTROLLING THE BACKGROUND IMAGE

THE EXPLANATION

That’s it. With just a few more lines of CSS, we can now fully control how the background will look like:

• background-repeat is enabled by default, and it is good if you have a repeating pattern. If not, it is best to set this one to no-repeat.
• background-size determines how the image will be processed to fit the space. cover will simply stretch the image to fit, but you can play around with the other settings to see which one works for you.
• background-position determines where the image will be displayed on the container. I usually set this to center or left top. Again, play around and see which one works for you.

THE HTML

THE CSS

/* [THUMBNAILS] */
#tgallery img {
  width: 33%;
  height: auto;
  float: left;
}
#tgallery img:hover {
  cursor: pointer;
}

/* [LIGHTBOX] */
#lightbox {
  /* Optional - fixed on screen */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  /* Full sized */
  width: 100%;
  height: 100vh;
  /* Background image */
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center; 
  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  /* Animation magic */
  transition: all 0.3s;
}
#lightbox.show {
  visibility: visible;
  opacity: 1;
}

/* [DOES NOT MATTER] */
html, body {
  margin: 0;
  padding: 0;
}

THE JAVASCRIPT

var lb = {
  wrap : null, // Holds the reference to the HTML lightbox div
  init : function () {
  // lb.init() : initialze on window load

    // Get HTML wrapper
    lb.wrap = document.getElementById("lightbox");
    // Click to close the lightbox div
    lb.wrap.addEventListener("click", lb.hide);
    // Attach onclick event to all image thumbnails
    var thumbs = document.querySelectorAll("#tgallery img");
    for (var t of thumbs) {
      t.addEventListener("click", lb.show);
    }
  },

  show : function () {
  // lb.show() : show the selected image

    // Attach selected image as background image on the lightbox, show it
    lb.wrap.style.backgroundImage = "url(" + this.getAttribute("src") + ")";
    lb.wrap.classList.add("show");
  },

  hide : function () {
  // lb.hide() : hide the full screen lightbox
    lb.wrap.classList.remove("show");
  }
};

/* [INIT] */
window.addEventListener("load", lb.init);

THE EXPLANATION

• The HTML and CSS parts should be pretty straightforward. There are 2 sections to it – The thumbnails, and full-screen lightbox container.
• We will use Javascript to change the background image of the full-screen 
  container and to display it.
• var lb contains all the key players of the full-screen image display.
• When the window is fully loaded lb.init will fire up and attach onclick event listeners to all the thumbnails.
• When the user clicks on a thumbnail, lb.show will read the src of the selected image, set it as the background on the full-screen container, and display it.
• Finally, when the user clicks on the full-screen container, lb.hide will hide the container itself.

DEMO

 

EXTRA
DOWNLOAD & MORE

That’s all for the code, and here is the download link as promised.

SOURCE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
 

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Responsive Images Responsive Videos