CSSで画像の縦横比を維持する

Question

Googleの「ライトボックス」画像でブラウザのサイズを変更すると、画像がどのように拡大されるのかを気にすることで、これに興味があります。https://plus.google.com/誰かが私はCSSを保存するアスペクト比にどのように見えるかを把握助けることはでき http://jsfiddle.net/trpeters1/mFPTq/1/

：

以下

のみ画像の幅とアスペクト比が失われたサイズを変更し、ブラウザの幅を変更jsfiddleですこの画像の？

あなたはjsfiddleを表示したくない場合は、ここでのHTMLだ：

<div id="imgWrapper" > 
    <div id="titleContainer">title container 
    </div> 
    <div id="imgContainer" >  
     <img id="mainImg" src="https://lh4.googleusercontent.com/-f8HrfLSF2v4/T609OOWkQvI/AAAAAAAAGjA/waTIdP4VkMI/s371/impact_of_early_exposure_to_D%26D.jpg">  
    </div> 
</div>​ 

はここにCSSです：

#imgWrapper{ 
    background:gray; 
    width:80%; 
    height:80%; 
    border-radius:5px; 
    border:1px solid gray; 
} 
#imgContainer{ 
    width:100%; 
    height:100%;  
} 
#titleContainer{ 
    background:yellow; 
    border-radius:5px; 
    border:1px solid gray; 
} 
#mainImg{ 
    width:100%; 
    height:61.8%;  
}​ 

Answer 1

私が正しくあなたを理解していた場合は、単純に高さを取り除きますimgをまとめてください。

http://jsfiddle.net/mFPTq/2/

#mainImg{ 
    width:100%; 
    /* NO HEIGHT height:61.8%; */ 
}​ 

Answer 2

時にはブラウザは、高さを拡大縮小します...私は、この問題を持っていたので、私は修正するためにやったすべては、このでした：

<style> 
img{ max-width:100%; height:auto; } 
</style>