Используя jquery, динамически и пропорционально изменяйте размер изображения.
Проблема: заставить изображение внутри плагина динамически изменять размер (H&W, пропорционально) внутри div, который укорачивается при изменении размера окна (в основном это три области: верхняя - статическая, нижняя - статическая, средняя - динамическая) с width:100%
а также top:#px
bottom:#px
, Изображения должны также в конечном итоге только изменить размер установленной высоты (603x427)
Вот эта страница:
Я чертовски близок, но что происходит с кодом ниже:
<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);
это позволить для нумерации страниц.
2 ответа
Вместо этого используйте функцию 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());
});
Если есть возможность пойти на компромисс, без элемента img вы можете сделать его фоном, тогда я думаю, что это то, что вы ищете http://css-tricks.com/how-to-resizeable-background-image/
В противном случае, если у вас есть исходное соотношение (ration = orgWidth/orgHeight), вы можете взять его и отразить на ширине / высоте. На изменение размера, height = org_height * ratio
, Достигнутый ранее, он довольно прост: как пропорционально изменить размер изображения / сохранить соотношение сторон?