How to enlarge an image with a click using regular JavaScript on a mobile device

Question

I am trying to create thumbnails that increase when clicked. The goal is for the selected thumbnail to expand itself to the maximum width of the device. If you click another thumbnail, its image will be replaced by the image of the currently selected thumbnail. Only one sketch can be enlarged at any time.

The image should cover the maximum width of the device. Also, I am trying to accomplish this using regular JavaScript (without jQuery), CSS, and HTML.

Javascript

function showImage(imgName) {
    document.getElementById('largeImg').src = imgName;
    showLargeImagePanel();
    unselectAll();
}
function showLargeImagePanel() {
    document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
    if(document.selection) document.selection.empty();
    if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
    obj.style.visibility = 'hidden';
}

HTML

<img  src="./Images/image.jpg" alt="1.jpeg" style="cursor:pointer" 
      onclick="showImage('./Images/image.jpg');">
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;">

CSS

#largeImgPanel {
    text-align: center;
    visibility: hidden;
    position: fixed;
    z-index: 100;
    top: 0; left: 0; 
    width:100%;
    height:100%; 
    background-color: rgba(100,100,100, 0.5);
}

The image pops up, but it is too large (wider than the device), so it does not fit the screen of a mobile phone. How to make the right size?

Answer 1

.

#largeImg  {
    height: auto;
    max-width: 100%;
}

, , , .