Элемент jQuery outerWidth() возвращает 0

Question

У меня есть элемент изображения с набором CSS

height: 64px;
width: auto;

Когда я пытаюсь получить высоту и ширину через JQuery, используя .outerHeight() & .outerWidth(), я могу получить высоту правильно, но ширина возвращается как 0. Я даже пробовал width(), innerWidth() все еще то же самое.

Я должен установить изображение динамически. Может быть, это имеет некоторые проблемы. Вот скрипка http://jsfiddle.net/abdulpathan/0vrbnpe3/3

Может ли кто-нибудь помочь мне справиться с этим.

Спасибо

Answer 1

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

jQuery(document).ready(function() {
  $('#test').on("load", function() {
  
  var height = $('#test').outerHeight();
  var width = $('#test').outerWidth();
  width = width.toFixed(2); // rounds it
  console.log('Width:' + width);
  console.log('Height:' + height);
  })
  $('#test').attr('src', 'https://www.gstatic.com/webp/gallery3/2.png'); 
});

.test-img {
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <img id="test" class="test-img">
</div>