が設定されているかどうかにかかわらず、Internet Explorerはmax-width: 100%を使用して応答画像のアスペクト比を失うことがあります。 '時には'は、使用される画像ファイルによって異なります。これはコーディングの問題ではなく、max-width: autoを使用しようとすると特定の画像で発生するIEの不具合です。アスペクト比が失われたInternet Explorer対応画像
例は、現在私の妻のためにウェブサイトwww.ladyjaneart.com/galleryで見ることができます。私が何を意味するかを見るためにIEと別のブラウザでそれをチェックしてください。
私はおそらく最後に固定サイズで行くつもりですが、私はこの問題について知られていることを知りたいのです。誰かがこの問題に遭遇したことはありますか？イメージファイル内のどのような条件についての情報が原因ですか？
スワップ高さ：最大高さの場合は自動です。
max-width: 100%;
max-height: 300px;
これはIEのスクリーンショットです。画像はアスペクト比を維持します。
のみwidth:100%ように、高さまたは幅を指定する、アスペクト比を保存します。それは十分です。もう一方は自動的に調整されます。
JavaScriptを使用して最大寸法をと決定し、それに従って使用することもできます。
<script type="text/javascript">
function CalculateImageSize(id){
var image = document.getElementById(id);
var height = image.offsetHeight;
var width = image.offsetWidth;
...
// use height, width to resize image.
}
</script>
あなたは純粋なCSS（Javascriptのための必要はありません）
使用HTML5マークアップを使用して問題を回避することができます
HTML：
<figure>
<img src='thepicture.jpg' alt='image'>
</figure>
CSS：
figure {
max-width: 400px;/*Or whatever;*/
width: 40%; /* or Whatever */
}
figure > img {
width:100%;
height:auto;
margin:0;
}
これは、<figure>要素にimgが含まれ、画像がFigure要素のサイズに自動的に拡大縮小されるということです。スケーリングは画像上ではなくボックスに合わせるために行われるため、誤ったアスペクト比のオプションはほとんどありません。
<img>タグには幅や高さが指定されていません。これはCSSで完全に行われます。
figureタグは、ディメンションの最大サイズ（および最小サイズ）を設定し、画像がこれらの指定されたディメンションを確実に満たすようにします。サイドノートでは
、何を頻繁に起こるのだろうと、彼らはmin-かmax-性質を与えられたが、標準を与えられていない場合は、さまざまなブラウザではアスペクト比とレイアウトで混乱しますです。たとえば、標準widthプロパティを与えずにIEにmax-width:プロパティを与えると、あなたが言及している矛盾の種類が発生します。
が100％の場合、これは既に最大値ですので、同じ要素のmax-widthも定義する必要はありません。min-widthと同じですが、サイズが100％または0％でないパーセンテージまたはその他の固定されていない変数（remなど）でない限り、単純には必要ありません。
さらにノート：物事のこれらの並べ替えのために正しくサイジング
ボックスはまた、あなたがなるように幅+パディングが、例えば、予想される幅よりも大きくないbox-sizing:border-boxを使用することを確実にすることによって助けすることができます。 width:66%: padding:1remは、ボックスサイズがと実際はが2rem + 66％になることを意味します。したがって、33％のマージンでオフセットが発生します。
これを '！important'にする必要はありません – Martin