JavaScript uzyskać szerokość i wysokość img i umieścić go w css innej klasy

Question

Nie mogę umieścić szerokość i wysokość pliku img w innej klasie css. Gdybyś tylko dał mi wskazówkę, która byłaby miła! Oto mój kod:

$('.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); 
}); 

Oczywiście Jej owinięte wokół document.ready.

Oto HTML, gdzie chcę mieć szerokość i wysokość obrazu:

<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> 

A oto div class gdzie chcę dać szerokość i wysokość:

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

Answer 1

Lepiej zrobić to, co robisz po załadowaniu img, ponieważ przeglądarki webkit ustawiają właściwość height i width po wczytaniu obrazu. Które mogą być lub mogą nie być po ukończeniu dokumentu.

$('.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

można użyć heightwidth funkcję jQuery i clientHeightclientWidth 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); 
});