Автоматическое изменение размера изображения с помощью JQUERY

Question

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

Как мне добиться этого с помощью jquery? Спасибо.

Answer 1

Вы можете сделать это без JavaScript, если изображение не будет иметь явной ширины (поэтому оно будет использовать исходную ширину) и добавит следующее свойство CSS:

<img style='max-width: 600px' src='...'>

Предупреждение: не работает в IE 6. Таблица совместимости

Answer 2

вам это поможет:

$('img').each(function(){
    if($(this).width()>600){
        $(this).width(600).css('cursor','pointer').click(function(){$(this).css('width','');});
    }
});

Answer 3

Если вы размещаете эти изображения, вы можете захотеть масштабировать их на сервере, когда они туда попадут. Таким образом вы сэкономите пропускную способность, сократите время загрузки браузера и не будете изменять размеры на стороне клиента.

Answer 4

Вы можете использовать css, чтобы установить ширину изображения на 100%, а затем сохранить соотношение сторон, используя jQuery, например:

$('#containerDiv img').width(); //gets width of image
$('#containerDiv img').height(); //gets height of image

Вы можете сделать расчет, чтобы сохранить соотношение сторон, а затем использовать свойство height(), чтобы установить новую высоту изображения.