如何顯示圖像的全尺寸

<a href="FullSize.jpg"><img alt="thumb" src="thumb.jpg"></a>

當點擊上面的拇指時，瀏覽器將顯示FullSize.jpg的大小以適應瀏覽器的客戶機窗口，當光標移到它上面時，「+」將出現以表示點擊圖片將顯示完整大小。我想要做的是首先顯示圖像的全尺寸，而不需要用戶點擊它以獲得完整的尺寸。如何做到這一點？如何顯示圖像的全尺寸

來源

2010-10-02 Jim

顯示全部圖像：<img alt="full image" src="FullSize.jpg" />？

編輯啊，我現在知道你的意思了。就像David Thomas所說，這取決於瀏覽器。如果您希望圖片顯示爲全尺寸，則無法直接鏈接到圖像。隨着HTML只有你可以做這樣的事情：

<a href=fullsize.html"><img alt="thumb" src="thumb.jpg"></a>

這將打開一個新的HTML頁面，這將顯示您的圖片：

fullsize.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Your image title</title> 
    </head> 
    <body> 
    <img src="FullSize.jpg" style="width:100%;height:100%;" alt="" /> 
    </body> 
</html>

但最終這不是真的要走的路。最好的做法是讓用戶選擇顯示內容的方式，而不是強制顯示內容。如果他們以較低的分辨率工作，並以全尺寸顯示巨大的圖像，他們無法改變它。最好只是鏈接到圖像，如果用戶決定他/她想要全屏查看，他們可以點擊圖像，以便瀏覽器調整大小。

來源

2010-10-02 17:46:55 Alec

只需刪除圍繞圖像的錨點</a>即可。如果您想「保證」以全尺寸顯示，請在<img />標記中添加width="100%"。

此外，要充分展示它，它不應該錨定在任何地方。只需將您的圖片立即標爲<body>標籤。

來源

2010-10-02 17:50:54

我不能顯示它的全尺寸，它只有拇指的空間。 – Jim 2010-10-02 18:04:46

我假設有一個CSS（類似於'img {...}'），它已被賦予固定的寬度，因此您的圖像不會以全屏顯示。註釋掉CSS中的'width'聲明。 – 2010-10-02 21:46:26

@Jim，沒有空間顯示完整大小的圖像，但你想顯示全尺寸的圖像？不計算... – Alec 2010-10-03 17:38:57

創建一個頁面FullSize.html與<img src="FullSize.jpg"/>和

顯示tumb與鏈接到該文件

<a href="FullSize.html"><img alt="thumb" src="thumb.jpg"></a>

來源

2010-10-03 17:05:09 jcubic

不幸的是，你的描述是瀏覽器的UI功能（或「錯誤」，這取決於您的的觀點），並且只能由用戶啓用/禁用。通常通過「編輯偏好」選項。

只有當圖像的全尺寸大於視口時纔會這樣做，這樣用戶就可以看到完整的圖像而無需滾動，它完成了「活動」，因此圖像本身未被壓縮/調整大小，只是縮放以適應視口。用戶只需點擊一次即可立即進行直觀的操作。我不確定，如果有解決方法，我可以推薦這樣一種技術，尤其是因爲它是一個我更快樂的功能，作爲開發者和用戶，比我不滿意通過它。

圍繞它的唯一方法，我能想到的是找到圖像的原始高度/寬度，將它包裝在具有這些尺寸的div（加上一點填充）中。我不確定它會起作用，但是現在我正在想它是唯一想到的事情。

來源

2010-10-03 17:11:42

如何顯示圖像的全尺寸

回答

相關問題