Используя jquery, динамически и пропорционально изменяйте размер изображения.

Проблема: заставить изображение внутри плагина динамически изменять размер (H&W, пропорционально) внутри div, который укорачивается при изменении размера окна (в основном это три области: верхняя - статическая, нижняя - статическая, средняя - динамическая) с width:100% а также top:#pxbottom:#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, Достигнутый ранее, он довольно прост: как пропорционально изменить размер изображения / сохранить соотношение сторон?

Другие вопросы по тегам