0

画像は他の場所(固定サイズのFacebook画像オブジェクト)からプルされているため、ブラウザでアスペクト比を維持しながら、設定された幅高さに画像を拡大縮小してトリミングしたいと思います。

CSSとJavascriptを使用してブラウザでこれを行う「標準的な」方法はありますか?画像の高さ/幅を変更し、上/左を使用して何かを機能させることができます。

画像オブジェクトのサイズを変更することで変更を有効にできますか?また、画像を切り抜いてサイズを変更する標準的な方法(切り抜きの計算方法)はありますか?

私はjQueryが答えを持っていることを望んでいました。

4

3 に答える 3

1

この投稿をチェックしてください: jQuery のアスペクト比へのサイズ変更

私が知っていることから、手動で行う必要があります。現在のサイズを取得してアスペクト比を取得し、新しい高さを設定して、アスペクト比に基づいて新しい幅を計算します。

于 2012-11-25T21:20:18.613 に答える
0

GoogleCodeで次のjQueryプラグインを見つけました。それはかなりうまくいくようですが、私はそのサポート/使用について心配しています。たった2つのリビジョン30かそこらのダウンロードで

スクリプトをサポートしないために、imgタグにheight属性とwidth属性を設定しています。次に、準備ができたら、タグから2つの属性を削除し、プラグインを使用してサイズを変更します。その効果は、画像がロード時に正しくサイズ設定されることですが、画像がデザインから溢れる代わりに、アスペクト比を修正するのに少し時間がかかる場合があります。

均一なサイズ変更とトリミングのための便利なjQueryプラグイン。

彼らの自己記述

サイズ変更とトリミング

クライアント側の均一なサイズ変更とトリミングのための便利なjQueryプラグイン。同様のサイズのアバターや画像に最適です(サイズが異なるほど、帯域幅のオーバーヘッドが大きくなります)。

理想的な使用法プラグインを使用して、たとえばFacebookユーザーのプロフィール写真(プロフィールアバター)を変換できます。サイズは似ていますが同じではありませんが、グリッドで表示する場合は、高さ(または幅)を同じにする必要があります。

Resize&Cropで何ができるかをよりよく理解するには、猫の例を参照してください。

于 2012-11-26T15:35:40.537 に答える
0

あなたが言うように、幅/高さで画像のサイズを変更できます。また、clip http://www.w3.org/TR/CSS21/visufx.html#clippingを使用して CSS で画像をトリミングできます。

それが要件を満たさない場合は、JavaScript を使用して画像に対して高度な処理を実行することは確かに可能canvasです。

于 2012-11-25T21:20:45.947 に答える