html - 幅または高さのどちらか小さい方に正確に収まるように、ボックス内に画像を配置するにはどうすればよいですか?

Question

サーバーからいくつかの写真をロードし、それぞれの写真を独自のボックスに表示して、ボックスがいっぱいになり、画像が大きすぎる場合は画像が中央に配置される (引き伸ばされない) ようにします。たとえば、各画像のサイズを知らなくても CSS でこれを実現できますか? 多分最大幅かそこらで？

これが私が欲しいものの例です：

score 3 · Accepted Answer

3

于 2012-04-10T18:20:30.817 に答える

score 0 · Accepted Answer

ここであなたは何をしますか。たとえば、画像が「ボクサー」というIDのDIV内にある場合は、「ボクサー」というIDのDIV内にあるすべての画像のサイズを自動的に変更するCSSを作成します。CSSは次のようになります。

#boxer img {
 Width: 600px
 Height: 600px;
}

上記のCSSは、CSSの仕様に合わせて内部に配置した画像のサイズを自動的に変更します。これは、寸法がCSSの寸法に対応している場合、ID「ボクサー」のボックスに正確に適合します。ボックスに収まるように、幅と高さの両方を100％実行できます。

score 0 · Accepted Answer

あなたができる最も速いことは、画像を中央に配置された背景画像として配置することです:

style="background: url(images/42.png) 50% 50% no-repeat"

ボックスより小さい画像は、ボックスの中央に配置されます。それより大きい画像はトリミングされます。

欠点は、スケーリングがないことです。

スケーリングするには、寸法を把握し、いくつかの数学を使用してアスペクト比を維持するスケーリング量を計算し、「overflow: hidden」を使用するトリミングコンテナー内にある実際の要素を使用する必要があります。

3 に答える 3