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

How to enlarge a clicked image with plain JavaScript on a mobile device

本文关键字：放大 JavaScript 图像 移动      更新时间：2023-09-26

我试图创建缩略图图像放大时点击。目标是将选中的缩略图放大到设备的最大宽度。如果单击另一个缩略图，则其图像将替换当前选中的缩略图。一次只能放大一个缩略图。

图像应该跨越设备的最大宽度。此外，我正试图用纯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';
}


<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);
}

图像确实弹出，但它太大(比设备的宽)，所以它不适合手机屏幕。我怎样才能使它的尺寸合适呢?

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

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

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

相关文章：