Почему изображение дергается при ресайзе?

Question

[Никита Шитиков]

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

function resizeImage() {
    
    var otn = $('.resImg').width() / $('.resImg').height();
    
    if ($('.resImg').width() >= $(window).width()) {
        $(".resImg").css({
            width: $(window).height() * otn + 'px'
        });
    } else {
        $(".resImg").css({
            width: $(window).width() + 'px'
        });
    }
}
resizeImage();
$(window).resize(resizeImage);

пример на jsfiddle

Answer 1

[Dmitry Bay]

почему гвоздь, который вы забиваете, забивается? )

Answer 2

[keslo]

У вас идея такая:
- Если ширина картинки больше, чем ширина окна, то... в свойство картинки width записываем height * на пропорцию картинки.

А где вообщем-то сам ресайз по горизонтали?

Если вы привязываетесь к ширине окна, то, по идее, если картинка шире окна, то присваиваем картинке ширину окна, а вот высоту картинки находим с помощью пропорции относительно новой ширины.

Comments

[Никита Шитиков]

разве не то-же самое сделает
img {
width:100%;
}

Но мне нужно что бы не оставалось пробелов под картинкой если сильно уменьшить ширину.

[Dmitry Bay]

а не проще тогда использовать div и свойство background-image c заполнением cover?

[Никита Шитиков]

Дмитрий Байчапанов: проще конечно, но я просто для учебы хотел написать это скриптом

[keslo]

Никита Шитиков: в таком случае можете просто читать текущий размер картинки при ресайзе и приводить к пропорциям по вертикали.

Answer 3

[Сергей]

А почему не CSS3?? Или это сугубо в учебных целях делаете? :)

Comments

[Никита Шитиков]

Исключительно в учебных целях)

Answer 4

[Александр Зачиналов]

Потому что нельзя ожидать быстрого срабатывания при такой организации. Зачем нагружать CSS вообще, если пишите на JS, то и пишите на нем...не стоит думать что присвоение стилей на JS это очень быстродейственно)) тем более при ресайзе окна без таймаута. Вообще пишите прямо так:

function resizeImage() {

    var wWindow = $(window).width();
    var hWindow = $(window).height();

    if ($('.resImg').width >= wWindow) {
        $(".resImg").width(hWindow * 1.5);
    } else {
        $(".resImg").width(wWindow);
    }
}
resizeImage();
$(window).resize(resizeImage);

...и будет вам счастье

Comments

[Никита Шитиков]

в вашем примере картинка почему-то ведет себя как при
img{width:100%}

[Александр Зачиналов]

угу, забыл потому что скобочки поставить, поэтому работал только else))) при правильном написании, дерганина возвращается, поэтому написал через naturalWidth картинки function resizeImage() {

var wWindow = $(window).width();
var hWindow = $(window).height();

if ($('.resImg').prop('naturalWidth') >= wWindow) {
$(".resImg").width(hWindow * 1.5);
} else {
$(".resImg").width(wWindow);
}
}
resizeImage();
$(window).resize(resizeImage);

Answer 5

[Роман Скрябин]

Может попробовать сделать проще:

<div>
    <img class="resImg" src="http://cs625521.vk.me/v625521867/1605a/Ka0S9DSmW-s.jpg"/>    
</div>

div{
    width:100%;
    overflow: hidden;
}
img{
    display: block;
    width: 100%;
    min-width: 1000px;
    height: auto;
}

вроде функционирует как у Вас, только без дергов :)

Comments

[Никита Шитиков]

Решение, конечно, хорошее. Но я хотел сделать именно скриптом, в качестве учебы.