2012-02-28 16 views
0

ブラウザのビューポートに基づいて画像のサイズを変更してトリミングできるようにするには、自分のサイトが必要です。私はそれまでイメージマップを使って動的にサイズを変更することができましたが、動的にトリミングするようなことはできません。画像を歪ませることなく同時に作ったり、スケールしたりしたいです。私が使用している画像は1920x1080です。これはほとんどのブラウザよりもはるかに大きいので、スケーリングしている間にエッジを切り取ると、ブラウザによっては同じように見えます。ウェブサイトで画像を動的にトリミング/拡大する方法

+0

この画像をどのように使用する予定ですか?サイトの背景として? DIVで? –

+0

基本的には、「リンク」がアクティブになるようにサイトをイメージマップに分割して、サイトをどのように見たいかをフォトショップで確認した画像です。私はちょうど良いサイズにそれを得ることができますが、私は高解像度の画面を持つものに対応するために、左右に大きな境界を残しました。標準的な人のために、私は端が切り取られる必要があります。 – user1238913

答えて

0

私はこのjQueryプラグインをかなり頻繁に使います。 :) http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

+0

これは私がすでに分かっているものと非常によく似ています。サイズを変更しますが、トリミングはありません。私はhtmlのイメージマップで大きな画像を使用していると一緒にサイズを変更するためにそれらの両方を得ることができますが、私も均等にそれをトリミングしたいと思います。あなたがビューポートのサイズに応じてトリミングしたい情報の980pxボックスの左右にかなり大きな領域があります – user1238913

+0

リンクがありますか?私はあなたがしようとしていることを視覚化するのに苦労しています。 – jonathanbell

0

何とかビューポートサイズを検出できるようです。イメージをトリミングするには、CSSまたはJavaScriptが必要です。その場合は、私がこの記事をお勧めします:

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

あなたは可能性があり

1)負のマージンを使用してください。 2)イメージをスマートな方法で絶対的に配置します。 3)CSSクリッププロパティを使用します。

+0

パーフェクト、ありがとう。私はonResizeとそれを交差させ、それに少しの数学を投げなければならないだろうが、それはうまくいくはずだ! – user1238913

関連する問題