如何在移动设备上使用普通JavaScript放大点击的图像

Question

我正在尝试创建点击时放大的缩略图图像。目标是让选定的缩略图放大到设备的最大宽度。如果另一个缩略图被点击，它的图像将替换当前选择的缩略图的图像。任何时候只能放大一个缩略图。

图像应该跨越设备的最大宽度。另外，我正在尝试用普通的JavaScript（没有jQuery），CSS和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); 
} 

图像并弹出，但它是太升arge（比设备宽），所以它不适合移动屏幕。我如何使它尺寸合适？

Answer 1

您需要将图像宽度限制为父容器的宽度。

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

这将强制图像不会大于它所容纳的容器，并自动缩小到较小的屏幕上。