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个不同的。

图像可以是任何尺寸，最大宽度为900像素（或高度，或两者），因此拇指必须为
1）在最短边（160x210或300x160，任何方向）调整为160px 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>