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

Question

還有一個問題。 我使用的是HTML KickStart，沒有PhP和其他任何內容。 純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）在最短的一側調整為160px（160x210或300x160，任何方向）
2）最長的一面必須裁剪，或者必須有特定的邊距值

有什么選擇嗎？

Answer 1

您可以創建許多CSS類，如下所示：

.thumb {
    max-width: 900px; 
}

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

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

或者，僅設置一個值，例如寬度，如下所示：

.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>