如何在网站中动态裁剪/缩放图像

Posted 2023-02-25

【中文标题】如何在网站中动态裁剪/缩放图像

【英文标题】：How to dynamically crop/scale images in a website

【发布时间】：2012-02-28 21:56:40

【问题描述】：

我需要我的网站能够根据浏览器上的视口调整和裁剪图像的大小。到目前为止，我已经设法使用图像映射动态调整它的大小，但似乎无法动态裁剪它。我希望它同时裁剪和缩放而不扭曲图像。我使用的图像是 1920x1080，比大多数浏览器都要大得多，因此在缩放时裁剪边缘会使它在不同的浏览器上看起来相似。

【问题讨论】：

你打算如何使用这张图片？作为网站的背景？在 DIV 中？

基本上我得到的是一张我希望网站看起来如何的photoshop图像，该图像已经被划分为图像地图，因此“链接”处于活动状态。我可以让它调整大小，但我在左右两侧留下了一个大边框，以适应那些具有高分辨率屏幕的人。对于标准人，虽然我需要裁剪边缘。

【参考方案1】：

我经常使用这个 jQuery 插件。 :) http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

【讨论】：

这与我已经弄清楚的非常相似，它调整了它的大小，但没有裁剪。我正在使用带有 html 图像映射的大图像，并且可以将这两个图像一起调整大小，但我也想均匀地裁剪它。在 980px 信息框的右侧和左侧有相当大的空间区域，我想根据视口大小裁剪出来

您有示例链接吗？我很难想象你想要做什么。

【参考方案2】：

听起来您已经可以通过某种方式检测视口大小。您只需要 CSS 或 javascript 来裁剪图像。在这种情况下，我会推荐这篇文章：

http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

你可以

1) 使用负边距。 2）以智能方式绝对定位图像。 3) 使用 CSS 剪辑属性。

【讨论】：

完美，谢谢。我将不得不使用 onResize 来解决这个问题并对其进行一些数学运算，但这应该可行！