寬度/高度（圖庫論壇）

進出口工作在網站上的畫廊，由縮略圖顯示塊的所有圖片和顯示特定圖像的部分。寬度/高度（圖庫論壇）

這是我使用以顯示縮略圖，並在其實際尺寸的圖像的代碼。

<a class="thumb" name="tuzla1" href="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" title="Tuzla"> 
<img height="75" width="75" src="http://hkdnapredak.com/root/images/stories/Tuzla2011.jpg" alt="Tuzla" /> 
</a>

問題是：我想不出任何設置打開圖像的大小。設置縮略圖大小很好：高度=「75」寬度=「75」，但打開的大小是問題。

來源

2012-03-12 demi

你有沒有想過'width：auto;身高：自動;'？ – redDevil 2012-03-12 21:33:31

您應該將每個圖像的縮放版本用作縮略圖，然後您無需在任何位置設置寬度或高度。你擁有它的方式，你正在讓人們下載更大的圖像，這將顯示爲75x75px的縮略圖。這是對服務器和用戶的帶寬浪費。 – bfavaretto 2012-03-12 21:37:15

此外，您不會通過簡單地使用真實圖像來顯示「縮略圖」，只會縮小它們的寬度和高度屬性。這被認爲是不好的形式。 – 2012-03-12 21:38:22

使用此方法，您無法設置要鏈接到的圖像的大小。它將在瀏覽器中打開，並且不會與HTML相關聯，所以它會以全尺寸打開（或根據瀏覽器進行縮放）。

解決方案是鏈接到包含圖像的頁面。這可讓您設置確定圖像大小的代碼。但是，這是一個手動過程 - 500張圖片需要500個自定義頁面。不理想。

如果你變得更加複雜，你可以建立一個腳本，並通過它和形象的名字，高度和寬度，然後動態地構建頁面在給定的高度和寬度顯示圖像。然後你可以用1個腳本顯示任意數量的圖像。

另一種方式去是一個lightbox插件，它可以讓你彈出的全尺寸圖像成一個盒子在頁面的其餘部分的頂部。您可能已經在Facebook或其他網站上看到過這種方法 - 它很受歡迎，並且不需要太多的努力來使用。我喜歡它，因爲您不必離開正在瀏覽的頁面，並且可以在相當緊湊的頁面上顯示大量照片。

來源

2012-03-12 21:33:15

感謝您的回覆。 – demi 2012-03-12 21:34:48

但是等等，還有更多！ :) – 2012-03-12 21:36:33

寬度/高度（圖庫論壇）

回答

相關問題