Javascript获取img的宽度和高度，并将其放入另一个类的css中

Question

I can't seem to putting the width and height of an img into another class css. If you could just give me a hint that would be nice! Here's my code:

$('.Main_hover').each(function() {
    var $this = $(this);
    var w = $this.find('img').width();
    var h = $this.find('img').height();
    $(".fusion-button-wrapper").css('height', h);
    $(".fusion-button-wrapper").css('width', w);
});

Of course its wrapped around a document.ready .

Here is the HTML where i want to take the width and height of the image:

<div class="imageframe-align-center">
  <span class="fusion-imageframe imageframe-none imageframe-1 hover-type-none Main_hover">
    <a class="fusion-no-lightbox" href="http://lowette.devel.growcreativity.be/portfolio-items/dummy3/" target="_self"> 
       <img src="http://lowette.devel.growcreativity.be/wp-content/uploads/2016/01/lowette_blok1_1.png" alt="Blok1_1" class="img-responsive">                </a>
 </span>
</div>

And here is the div class where i want to give the width and height:

<div class="fusion-button-wrapper"></div>

Answer 1

Its better to do what you are doing once img is loaded because webkit browsers set the height and width property after the image is loaded. Which may or may not be after document ready is completed.

 $('.Main_hover img').load(function() { $(".fusion-button-wrapper").width(this.width); $(".fusion-button-wrapper").height(this.height); }); 

 .fusion-button-wrapper{ background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="imageframe-align-center"> <span class="fusion-imageframe imageframe-none imageframe-1 hover-type-none Main_hover"> <a class="fusion-no-lightbox" href="http://lowette.devel.growcreativity.be/portfolio-items/dummy3/" target="_self"> <img src="http://lowette.devel.growcreativity.be/wp-content/uploads/2016/01/lowette_blok1_1.png" alt="Blok1_1" class="img-responsive"> </a> </span> </div> <div class="fusion-button-wrapper"></div> 

Answer 2

you can use height width function of jQuery and clientHeight clientWidth of javascript

$('.Main_hover').each(function() {
  var $this = $(this);
  var h = $this.find('img')[0].clientHeight;
  var w = $this.find('img')[0].clientWidth;
  $(".fusion-button-wrapper").height(h);
  $(".fusion-button-wrapper").width(w);
});