如果您要使用純JavaScript，則可以設置onclick事件偵聽器并獲取圖像的實際大小(確定圖像在瀏覽器中的原始大小嗎？)，然后將此大小設置為image。(如果您希望第二次單擊將其設置為舊尺寸，請將舊尺寸保存到全局變量中，然后進行設置)。看起來像這樣：

我對純JavaScript不太滿意，但我想是這樣。

將此代碼添加到文件中的某個位置。它將為每個圖像運行

window.onload = function() {

images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++){

images[i].onclick = function(e){

var isBig = e.target.getAttribute('isBig');

if (isBig === undefined || isBig == 'false'){

// make it big

e.target.setAttribute('isBig', 'true');

e.target.setAttribute('oldWidth', e.target.offsetWidth);

e.target.setAttribute('oldHeight', e.target.offsetWidth);

var newImg = new Image();

newImg.onload = function() {

e.target.style.width = newImg.width+"px";

e.target.style.height = newImg.height+"px";

}

newImg.src = e.target.getAttribute('src');

}

else {

// make it small

e.target.setAttribute('isBig', 'false');

e.target.style.width = e.target.getAttribute('oldWidth')+"px";

e.target.style.height = e.target.getAttribute('oldHeight')+"px";

}

}

}

}

這會將圖像的寬度和高度設置為原始大小。

如果要使用絕對定位使其全屏顯示，則需要創建一個新元素和img標簽。您只需要將其src設置為圖像的src。然后，您可以顯示該圖像。例子：

X

function closeImage() {

document.getElementById("bigImage").style.visibility = 'hidden';

}

images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++){

// on image click

images[i].onclick = function(e){

// set image src

document.getElementById("bigImageChild").src = e.target.src;

// show image

document.getElementById("bigImage").style.visibility = 'visible';

}

}

總結

以上是生活随笔為你收集整理的html图片显示原始大小,我如何使PHP / HTML图像在单击时显示原始大小？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。