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

还有其他问题。我使用HTML KickStart，没有PhP和任何东西。纯css/js。有画廊的图像。每一个形象，通常有类似代码图库中的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）调整为160像素上最短边（160x210，或300x160，任何取向）
2）最长侧必须裁剪或必须有特定的保证金值

任何选项？

来源

2012-06-20 user1442062

你应该使用

我不认为canvas是一个选项，因为这对IE来说是一个问题（up到9版本）和一些老火狐，和歌剧。另一方面，CSS/JS总是在工作，所以我试图不使用CANVAS如果没有必要 – user1442062

好的，在这种情况下查看CSS'clip'属性。您仍然需要做一些数学运算来确定剪辑值，但是您可以在不使用画布的情况下得到相同的结果。有一个很好的例子http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html – Graham

你可以像这样创造了多项CSS类：

.thumb { 
    max-width: 900px; 
} 

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

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

OR，仅有一个值，如宽度，像这样：

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

来源

2013-02-20 09:15:28 user1752759

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

回答

相关问题