如何在移動設備上使用普通JavaScript放大點擊的圖像

我正在嘗試創建點擊時放大的縮略圖圖像。目標是讓選定的縮略圖放大到設備的最大寬度。如果另一個縮略圖被點擊，它的圖像將替換當前選擇的縮略圖的圖像。任何時候只能放大一個縮略圖。如何在移動設備上使用普通JavaScript放大點擊的圖像

圖像應該跨越設備的最大寬度。另外，我正在嘗試用普通的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（比設備寬），所以它不適合移動屏幕。我如何使它尺寸合適？

來源

2014-05-13 Blockspace21

你做了什麼？ –

編輯我的問題 – Blockspace21

您需要將圖像寬度限制爲父容器的寬度。

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

這將強制圖像不會大於它所容納的容器，並自動縮小到較小的屏幕上。

來源

2014-05-13 21:32:43 Axel

我做到了這一點，它仍然以較大和較高的移動設備的方式;我看到像圖片的1/8 – Blockspace21

因此，根據您的問題，您要求「不得超過設備」。如果您還想限制高度，我建議使用CSS媒體查詢，以限制移動屏幕分辨率的圖像高度。 – Axel

是的，但我做了你告訴我和圖像仍然不寬的設備，它的原始分辨率，因此它看起來像10時間寬設備 – Blockspace21

如何在移動設備上使用普通JavaScript放大點擊的圖像

回答

相關問題