純CSS圖像縮略圖

Question

我想在網格中顯示圖像縮略圖的集合。圖像會有各種大小，但我想限制縮略圖到一個特定的大小（比如說200px寬和150px高）。

我想找到什麼是一些神奇的HTML標記和CSS規則，將

1. 允許包括在正常<img>元素圖像
2. 確保縮略圖融入他們的200x150像素箱，保持它們的比例，並且以溢出的任何尺寸爲中心。
3. 不按規定的JavaScript或每個圖像的實際尺寸

我不知道這是可能的特定知識。我可以做什麼，我想用下面的標記A（壞）近似：

<div class="thumb"> 
    <img src="360x450.jpeg"> 
</div> 

和CSS：

.thumb { 
    width: 200px; 
    height: 150px; 
    overflow: hidden; 
} 
.thumb img { 
    min-width: 200px; 
    min-height: 150px; 
    width: 200px; 
} 

這種嘗試突破以各種不同的方式：

1. 縱向方向的圖像大小將正確，但會通過容器底部溢出，導致垂直偏離中心的裁剪。

2. 由於硬編碼的width和min-height規則，寬和短的圖像將在水平方向上失真。

3. 但是沒有硬編碼的width，大於最小高度和寬度的圖像根本不會調整大小。

如果這是在所有的幫助，我已經忍了，將（希望）說明什麼，我試圖做的，下面的例子：

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

我知道我可以通過完全省略<img>元素來解決此問題，而是將縮略圖拉到中間的背景圖像上aining元素，但是，如果可能的話，我想在頁面中保留<img>元素。

感謝您提供任何幫助或建議！

編輯：我想我應該注意的是一個理想的解決方案將在IE 6+和現代瀏覽器的工作，但在IE 9和其他現代瀏覽器（WebKit的近期，蛤蚧等）可在任何解決方案很樂意接受。

Answer 1

可能的，可能。

此外，可能不是最好的主意。你要解決的重大問題是縮略圖的定位。如果你正在處理全景圖呢？當然，縮小它將創造一個非常難看的「壓扁」形象，就像一個非常高的形象。很少有人在100％的時間內以4X3或16X9進行交易。所以，你需要一個機制來填充圖像。即使比例是正確的，它也不會像使用Photoshop或Gimp這樣的程序那樣整潔地調整大小。

在這個思考過程中的另一個主要問題是，你將通過更大的圖像發送大量的不必要的數據到服務器。加載需要更長的時間，不必要地填充DOM，整體上只會抑制UI體驗。

有很多方法可以解決這個問題，沒有一個是純粹的CSS。我已經多次解決了這個問題，每次都以基於客戶端的獨特方式解決。對於一個想要完全自定義的東西的客戶來說，這是一個自定義上傳器，通過iMagick（圖像魔法的一部分）和具有主要交互性的專輯的自定義CSS/Javascript調整大小。在另一個例子中，我使用Gallery作爲後端 - 處理縮略圖的創建，上傳，標題，裁剪和組織 - 然後將重新格式化的圖像鏈接從數據庫中提取出來，以更吸引人的方式顯示它們。你可以爲自己節省更多的麻煩，只需使用像Flickr api這樣的東西來拉取圖片供你使用。

這裏有using ImageMagick to do thumbnails.

Answer 2

一個嘖嘖可以（種）與CSS3 background-size增加實現這一目標：contain和cover。

Live Demo

• contain（頂部圖片）適合的整個圖像，保持縱橫比。沒有任何東西被裁剪。

• cover（底部圖片）垂直或水平（取決於圖像）填充包含元素，並裁剪其餘部分。

Answer 3

嘗試設置最大寬度和高度，因爲沒有min如果圖像是不完全是它的大小會溢出:)

Answer 4

.thumb img { 
    max-width: 200px; 
    max-height: 150px; 
    min-width: 200px; 
    min-height: 150px; 
} 

嗯，我知道了你的大拇指如果你想要一個較小的圖像，使其更大，更大的圖像，使其更小，會希望它最大和最小。