我想将图像缩放和裁剪到设定的宽度和高度,同时保持浏览器中的纵横比,因为图像是从其他地方(具有固定大小的 facebook 图像对象)拉出来的。
在使用 CSS 和 Javascript 的浏览器中是否有“标准”方法来执行此操作?我可以更改图像的高度/宽度并使用顶部/左侧来使某些东西正常工作。
调整图像对象的大小是否是进行更改的方式,是否有裁剪和调整图像大小的标准方法(如何计算裁剪)?
我希望 jQuery 会有一个答案。
我想将图像缩放和裁剪到设定的宽度和高度,同时保持浏览器中的纵横比,因为图像是从其他地方(具有固定大小的 facebook 图像对象)拉出来的。
在使用 CSS 和 Javascript 的浏览器中是否有“标准”方法来执行此操作?我可以更改图像的高度/宽度并使用顶部/左侧来使某些东西正常工作。
调整图像对象的大小是否是进行更改的方式,是否有裁剪和调整图像大小的标准方法(如何计算裁剪)?
我希望 jQuery 会有一个答案。
看看这篇文章: jQuery resize to aspect ratio
据我所知,您必须手动完成。通过获取当前大小获取纵横比并设置新高度并根据纵横比计算新宽度。
您可以按照您所说的调整宽度/高度的图像大小,并且可以使用clip
http://www.w3.org/TR/CSS21/visufx.html#clipping在 CSS 中裁剪图像
如果这不能满足您的要求,当然可以使用 JavaScript 对图像执行高级处理canvas
。
我在 Google Code 上找到了以下 jQuery 插件。它似乎工作得很好,但我担心它的支持/使用。只需两次修订和30 次左右的下载。
为了不支持任何脚本,我在 img 标签上设置了高度和宽度属性。然后准备好我从标签中删除两个属性并使用插件调整大小。效果是图像在加载时大小正确,但可能需要一些时间来校正纵横比 - 而不是图像溢出设计。
他们的自我介绍
调整大小和裁剪
方便的 jQuery 插件,用于客户端统一调整大小和裁剪。非常适合具有相似大小的头像和图像(更多不同的大小 - 更大的带宽开销)。
理想用途 例如,您可以使用插件来转换 Facebook 用户的个人资料图片(个人资料头像)。它们的大小相似但不相同,但如果您想在网格中显示它们,您可能希望它们具有相同的高度(或/和宽度)。
请参阅猫的示例,以更好地了解 Resize & Crop 可以为您做什么。