Получить размер изображения с Jquery

Question

У меня есть список изображений

<img src="001.jpg"> 
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">

Каждое изображение имеет ширину 200px, но его высота различна.Есть ли способ с помощью Jquery найти, а затем установить высоту каждого изображения после их загрузки?

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

Я использую плагин Masonry, и он требует атрибуты ширины и высоты для изображений.

Answer 1

Я верю, что это будет делать то, что вы хотите:

$('img').each(function() {
    $(this).attr('height',$(this).height());
    $(this).attr('width',$(this).width());
});

Возможно, вы также захотите добавить атрибут class="masonry" к каждому img, а затем сделать селектор $('img.masonry').

Answer 2

Вы можете попробовать:

$('img').each(
    function(){
        var height = $(this).height();
        var width = $(this).width();

        $(this).attr({'height': height, 'width': width});
    })

При условии, что вы хотите, чтобы атрибуты height / width были установлены на фактическую высоту / ширину img, а не масштабированы / изменены каким-либо образом.

Ссылки:

• height()
• width()

Answer 3

Вы можете использовать методы jQuery .height() и .width(), так как они возвращают вычисленную ширину и высоту. Однако вы всегда должны включать атрибуты width и height в ваши теги img, так как некоторые браузеры не будут правильно отображать эти изображения без них.

Answer 4

Конечно, используйте метод height, чтобы получить размер тегов img.

http://api.jquery.com/height/