0

画像をロードする固定コンテナー (200x200px) があります。各画像にはさまざまなサイズがあり、現在、画像をコンテナの幅に合わせてサイズ変更するか、画像の比率を失う必要があります。

画像 (背景画像ではない) をコンテナーに追加し、その比率を変更せずに画像を中央に表示するにはどうすればよいですか (画像が 800x600 の場合)、同じ画像の中央中央 200x200 が表示されますか? これを機能させるために、PHP、jQuery、またはいくつかの CSS マジックを使用してもかまいません。

どうやって始めればいいのかわからないので、誰かがこれを行う方法として手順や飛び石を手伝ってくれることを願っています?

編集 **

私はおそらく適切に説明していません。すべての画像は、割り当てられた 200x200 領域よりも大きくなっています。サイズ変更の問題は、ユーザーが画像をクリックすると、ライトボックスに同じ画像をロードする必要があることですが、同じ画像をロードするという重要な違いがあります。効果的に、画像のプロポーションを妨げずに「サムネイル」ビューを強制したいと考えています。一部の画像は水平で、一部は垂直であるため、200x200 で画像の「中央」またはいずれかの隅を表示し、ユーザーに画像をクリックして全体像を表示させることを考えました。私が探しているのは、背景画像と同じように画像を「動作」させる方法ですが、背景画像ではありませんか? それは理にかなっていますか?また、支援できるものはありますか?

** サンプル画像 ** これは私のアイデアを説明するためのサンプル画像です: http://tinypic.com/view.php?pic=21caxc1&s=6

4

3 に答える 3

0

画像の幅を確認できます。幅が高さよりも大きい場合は、画像の幅を縮小します。代わりに、高さから縮小して、次のようにコンテナを埋めます。

list($width, $height) = getimagesize("image_name.jpg");
if ($width>$height){
   echo'<img src="image_name.jpg" style="width:200px;" alt=""/>';
}
else{
   echo'<img src="image_name.jpg" style="height:200px;" alt=""/>';
}
于 2013-02-21T15:20:25.790 に答える
0

または、CSS ベースのソリューションを試してください。のような画像のクラス属性を指定します.resizedimg{width:90%}。この 90% は、元の画像の幅ではなく、コンテナーの幅に相対的です。

それが助けにならない場合は、jqueryから作成してください。これは、仕事を本当に良くするツールです: http://imgscale.kjmeath.com/

于 2013-02-21T15:23:28.693 に答える
0

ページ速度の観点から画像のサイズを変更する必要があります。ユーザーが 800x600 の画像をダウンロードして、ブラウザによって幅 200px に縮小されるのは無駄です。

いずれにせよ、これを行うにはいくつかの方法があります。まず、width属性を に追加できますimg。

または、CSS の使用を検討してください。.img{ max-width: 200px;

于 2013-02-21T15:19:09.533 に答える