Javascript CSS/JS在库中调整图像大小/裁剪图像

我还有一个问题。我使用的是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”这样的选项，我可以在几分钟内使它们变小，但是，当您可以使用一个图像（并且自动调整大小）时，它比使用两个不同的图像更有用

图像可以是任意大小，宽度可达900px（或高度，或两者兼有），因此拇指必须是
1） 在最短侧（160x210或300x160，任意方向）调整为160px
2） 必须裁剪最长的边，或者必须具有特定的边距值

---

有任何选项吗？

您可以创建许多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;
}

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

并将其应用于HTML元素，如下所示：

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

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

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

您应该使用这个方法，特别是我不认为canvas是一个选项，因为它是IE（最多9个版本）和一些旧Firefox以及opera的问题。另一方面，CSS/JS总是在工作，所以如果不需要的话，我尽量不使用CANVAS OK，在这种情况下，请查看CSS

clip

属性。为了确定剪辑值，您仍然需要做一些数学运算，但是您可以在不使用画布的情况下得到相同的结果。有一个很好的例子看起来不错，但是有RECT像素值，所以。。。idk，因为没有。。。财产什么的。但这是件好事。更多想法？您是否真的想保存裁剪图像的副本，而不仅仅是在浏览器中显示？如果是这样，画布或Flash是您的选择。