Сохранять отношение img с jQuery или CSS

Question

Более 910 пикселей, у меня есть фиксированный img, который занимает 100% от высоты окна и имеет ширину: auto ;. При загрузке изображение всегда имеет хорошие пропорции, но когда я уменьшаюсь (снизу), он искажает себя.

Ширина остается неизменной и не уменьшается.

Образ содержится в .picture DIV:

.picture { 
float: left; 
position: fixed; 
height: 100%; 
width: auto; 
} 

Пример:

Есть ли способ, чтобы заставить изображение, чтобы сохранить это оригинальный формат, возможно с помощью JQuery? Содержание справа уже изменяет ширину в зависимости от ширины изображения.

Вот шаблон: http://bettercheckthekids.com/pirlo/index.html

Answer 1

я хотел бы предложить вам альтернативный способ решить вашу проблему. если вы используете бутстрап, вы можете включить div для создания изменяемого размера изображения.

<div class="img-responsive"> 
    <img src="test.jpg" width='xxx' height='yyy' alt='test'> 
    </div>