CSS/JS 调整大小/裁剪图库中的图像答案

【问题标题】：CSS/JS Resize/Crop images in galleryCSS/JS 调整大小/裁剪图库中的图像
【发布时间】：2013-02-20 17:15:28
【问题描述】：

还有一个问题。我正在使用 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）最长边必须被裁剪，或者必须有特定的边距值

有什么选择吗？

【问题讨论】：

您应该为此使用所述
我不认为画布是一个选项，因为它对于 IE（最高 9 版本）和一些旧的 Firefox 和歌剧来说是个问题。另一方面，CSS/JS 一直在工作，所以如果没有必要，我会尽量不使用 CANVAS
好的，在这种情况下查看 CSS clip 属性。您仍然需要进行一些数学运算才能确定剪辑值，但您可以在不使用画布的情况下获得相同的结果。 seifi.org/css/…有一个很好的例子
看起来不错，但是有RECT像素值，所以是... idk，因为没有 .. . 财产什么的。但是剪辑是个好东西。更多想法？
您是否真的想要保存裁剪图像的副本，而不仅仅是在浏览器中显示？如果是这样，画布或 Flash 是您的选择。

【解决方案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>

【讨论】：