Q

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

2012-02-28 63 views 0 likes

0

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

2012-02-28 user1238913

+0

你打算如何使用这张图片？作为网站的背景？在DIV中？ – 2012-02-28 22:00:45

+0

基本上我得到的是一个photoshop图像，我希望网站看起来已经分成图像映射，因此“链接”处于活动状态。我可以调整它的大小，但我在左右边留下了一个大边框，以适应高分辨率屏幕。对于标准人物，尽管我需要将边缘裁剪掉。 – user1238913 2012-02-28 22:07:33

A

回答

0

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

2012-02-28 22:01:45 jonathanbell

+0

这与我已经知道的非常相似，它调整了大小，但没有裁剪。我使用一个带有html图像的大图像，可以同时调整这两个大小，但我也想均匀裁剪它。根据视口大小，我想裁剪出980px信息框的右侧和左侧有相当大的空间区域 – user1238913 2012-02-28 22:04:35

+0

您是否有示例链接？我很难想象你在做什么。 – jonathanbell 2012-02-29 19:03:20

0

这听起来像你已经可以检测到视口大小莫名其妙。您只需要CSS或JavaScript来裁剪图像。在这种情况下，我推荐这篇文章：

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

你可以

1）使用切缘阴性。 2）绝对定位图像的智能方式。 3）使用CSS剪辑属性。

2012-02-28 22:03:47 dangerChihuahua007

+0

完美，谢谢。我将不得不用onResize来交叉，并且对它进行一些数学运算，但这应该可行！ – user1238913 2012-02-28 22:11:22

相关问题