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

Question

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

Answer 1

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

Answer 2

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

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

你可以

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