IE8で縦横比を維持しながら、最小/最大高さ/幅の画像を表示

Question

私はちょうど100x150のウィンドウに表示しているプロファイル画像のグリッドを持っています。

非常にサイズが60x60から300x300のソースイメージです。 （大きすぎる、小さすぎる）

IE8 +以外のすべてのブラウザで動作していますが、div内にimgタグが置かれています。

divには正確な高さが設定されており、オーバーフローは隠されており、imgには最小/最大幅と高さが設定されています。

IEを除くすべてのブラウザは、縦横比を変更せずに幅/高さを最小/最大レベルに変更します。 IEはアスペクト比を変更します（幅と高さを別々に変更します）。

background-size：IE8でサポートされていないため、カバーが切れています。

アイデア？

Answer 1

私はあなたがこのようなスクリプトが必要だと思いますか？ yes：画像の高さの設定= divの高さ（余分な幅はオーバーフローdivによって隠されます） いいえ：すべてOKです。高さが隠されます

このようなことを行うjqueryプラグインがあります。それらは "背景画像プラグイン"のように呼ばれます。それは自分自身を書くことは簡単です。

は、コード内で私の言葉のようになります。How to resize images proportionally/keeping the aspect ratio?

Answer 2

最小/最大幅と高さを使用する代わりに、各画像の幅を設定します。ブラウザ（IEを含む）は、<img />タグ内の1つのパラメータのみが提供されている場合、画像の縦横比を維持したまま画像のサイズを変更します。このように：div要素の画像<高の 高さ：親のイメージ=幅（オーバーフローとdiv要素）の セット幅：

<div style="width: 100px; height: 150px;"> 
    <img src="#" style="width: 100px;" alt="#" /> 
</div>