Javascript gets img width and height and puts it in css of another class

Question

I can't imagine img width and height in another css class. If you could just give me a hint, that would be nice! Here is 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, this is wrapped around a document.

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 specify the width and height:

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

Answer 1

It is better to do what you do when img loads, because webkit browsers set the height and width property after loading the image. What may or may not be after the completion of the document.

 $('.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 for jQuery and clientHeight clientWidth 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); });