2

例を挙げて説明しましょう。

Lets say I have an Image of size

960px X 668px

I have a div which holds this image. The div size is
154px X 75px

この div は任意の可変サイズを持つことができます。

If we see that the aspect ratio of image and the aspect ratio of the div 
that holds image are different.

私がする必要があるのは、元のサイズの最大の高さと幅を取り、この画像を保持する div のアスペクト比を維持するように、PHP を使用して画像のサイズを変更してトリミングすることだけです。結果のサイズが画像サイズに近づくが、画像サイズを超えないようにするために、DIVの幅と高さにどれだけ乗算する必要があるかというパーセンテージを計算するロジックが必要です。また、アスペクト比はDIVと同じになりますが、イメージのものではありません。

ありがとうシャルミラ

4

1 に答える 1

1

では、幅の比率と高さの比率のどちらを使用するかを確認する必要があります。

img.with / div.with = ratio_w
img.height / div.height = ratio_h

次に、より高い比率は、画像が div に確実に収まるようにするために使用する必要がある比率です。

あなたの例では、

ratio_w = 960 / 154 = 6.2
ratio_h = 668 / 75 = 8.9

ratio_h高いので、ratio_hあなたの比率です

次に、divに合わせるために、サイズ変更の計算は次のとおりです

960 / 8.9 = 108
668 / 8.9 = 75

ロジックは他の値と同じです。

サイズ変更の問題がなければ、この CSS プロパティを確認することをお勧めします

background-size: contain;
于 2013-04-17T18:20:52.107 に答える