圖庫中的CSS/JS調整大小/裁剪圖像

還有其他問題。我使用HTML KickStart，沒有PhP和任何東西。純css/js。有畫廊的圖像。每一個形象，通常有類似代碼圖庫中的CSS/JS調整大小/裁剪圖像

<div class="gallery"> 
    <a href="image.jpg"><img src="image_small.jpg" width="160" height="160"></a> 
</div>

與效果之類的東西。問題是 - 如何動態地裁剪/調整大拇指以顯示它們？想法是這樣的

<div class="gallery"> 
    <a href="image.jpg"><img class="thumb" src="image.jpg"></a> 
</div>

使用相同的圖像，但我沒有裁剪/調整每一個在Photoshop中製作，是啊，有喜歡「Dropresize」在那裏我可以讓他們在幾分鐘內小選項，但是，如果您可以使用1張圖片（並自動調整大小的縮略圖），那麼它會比2張不同的圖片更有用。

圖像可以是任何大小，最多900px寬度（或高度，或者二者）以便拇指必須
1）調整爲160像素上最短邊（160x210，或300x160，任何取向）
2）最長側必須裁剪或必須有特定的保證金值

任何選項？

來源

2012-06-20 user1442062

你應該使用

我不認爲canvas是一個選項，因爲這對IE來說是一個問題（up到9版本）和一些老火狐，和歌劇。另一方面，CSS/JS總是在工作，所以我試圖不使用CANVAS如果沒有必要 – user1442062

好的，在這種情況下查看CSS'clip'屬性。您仍然需要做一些數學運算來確定剪輯值，但是您可以在不使用畫布的情況下得到相同的結果。有一個很好的例子http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html – Graham

你可以像這樣創造了多項CSS類：

.thumb { 
    max-width: 900px; 
} 

.thumb160px { 
    width: 160px; 
    height: 210px; 
} 

.thumb300px { 
    width: 300px; 
    height: 160px; 
}

OR，僅有一個值，如寬度，像這樣：

.thumb160px { 
    width: 160px; 
    height: auto; 
} 

.thumb300px { 
    max-width: 300px; 
    height: auto; 
}

並申請了此信息HTML元素，像這樣：

<div class="gallery"> 
    <a href="image.jpg"><img class="thumb300px" src="image.jpg"></a> 
</div>

來源

2013-02-20 09:15:28 user1752759

圖庫中的CSS/JS調整大小/裁剪圖像

回答

相關問題