изменить размер изображения, сохранить соотношение сторон изображения с CSS

Question

Меня заинтересовало это, заметив, как масштабируются изображения при изменении размера браузера на «лайтбоксе» в Google+: https://plus.google.com/.

ниже в jsfiddle, который при изменении размеров ширины браузера, только изменяет размер ширины изображения и соотношение сторон теряется: http://jsfiddle.net/trpeters1/mFPTq/1/

Может кто-то помочь мне понять, что CSS будет выглядеть на сохранение соотношения сторон этого изображения?

Если вы не хотите, чтобы просмотреть 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>