Использование jquery, динамически и пропорционально изменить размер img

Question

Проблема: Чтобы сделать изображение внутри динамического динамического изменения динамически (H & W, пропорционально) внутри div, который становится короче при изменении размера окна (существуют по существу три области: Top - static , нижний - статический, среднединамический) с width:100% и top:#pxbottom:#px. Изображения должны в конечном счете, только размер их набора высоты (603x427)

Вот страница:

My current woe

Я чертовски близко, но то, что происходит на код ниже:

<script type="text/javascript"> 
      $(window).resize(function() { 
       var hgt = $(window).height() - 427; 
       var wid = $(window).width() - 633; 
       $('.slides_container img').height(hgt); 
       $('.slides_container img').width(wid); 
       $('.slides_container').height(hgt-30); 
       $('.slides_container').height(hgt); 
       $('.vid').width($(window).width()); 
      }); 
</script> 

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

Легенда: .slides_container является частью модуля и содержит изображение, .slides_container img является изображением, .vid содержит .container для центрирования. Для вышеуказанного кода $('.slides_container').height(hgt-30); предназначен для разбивки на страницы.

Answer 1

Используйте функцию CSS() вместо:

$(window).resize(function() { 
    var hgt = $(window).height() - 427; 
    var wid = $(window).width() - 633; 
    $('.slides_container img').css({ 
     width:wid, 
     height:hgt 
    }); 
    $('.slides_container').height(hgt); 
    $('.vid').width($(this).width()); 
}); 

Answer 2

Если можно пойти на компромисс, без Img элемента вы можете сделать его фоном, то я думаю, что это то, что вы ищете http://css-tricks.com/how-to-resizeable-background-image/

В противном случае, если у вас есть исходное соотношение (ration = orgWidth/orgHeight), вы можете взять его и отразить его по ширине/высоте. On resize, height = org_height * ratio. Выполнено до этого, довольно прямолинейно: How to resize images proportionally/keeping the aspect ratio?