javascript - 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) 将最短边调整为 160 像素(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>