Höhe von img-Tags mit ng-repeat

Question

generiert

Ich habe ein Karussell, die Bilder mit einem ng-Repeat erstellt werden. Die Breite dieser Img-Tags wurde auf 100% gesetzt; und die Höhe, automatisch. Wie bekomme ich die Höhe der IMG-Tags programmgesteuert, da sich dieser Wert ändert, wenn die Größe des Fensters geändert wird? Ich probierte

$('#home-carousel img').load(function(){ 
    console.log($(this).height()); 
}) 

aber es funktioniert nicht, da die IMGs zu dieser Zeit nicht existieren. Hier ist der Code Ich arbeite mit:

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel"> 

    <!-- Here's where the problem is --> 
    <div class="carousel-inner" role="listbox"> 
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }"> 
     <img src="{{slide.imgUrl}}"> 
    </div> 
    </div> 

EDIT: Okay lassen Sie mich so erarbeiten. Das versuche ich zu erreichen: Also sollen die Bilder der Farbeimer genau so gezeichnet werden, wie es in diesem Bild aussieht; rechts unten, wo das Hintergrundbild endet

Problem ist, da die Breite des Bildes ist 100%, wenn das Fenster verkleinert wird, ist es das, was passiert. Also, was ich tun möchte, ist die Höhe der IMG-Bilder in das Karussell zu bekommen und den Farbeimer basierend darauf zu positionieren

Answer 1

Werfen Sie einen Blick auf Angular's ng-src.
Auch nach einer kurzen Suche stieß ich auf this - die Sie nützlich finden können.

Answer 2

Okay, so löste ich dies tun dies: Zuerst habe ich @ Braden1996 ‚s link die anfängliche Höhe des img-Tag zu erhalten, wenn es zuerst ist geladen

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }"> 
     <img ng-src="{{slide.imgUrl}}" imageonload="imageLoaded()"><!--here--> 
    </div> 
    </div> 
</div> 

Hier ist das javascript:

$scope.imageLoaded = function(){ 
    $('.grid-container').css('margin-top',$('#home-carousel').height()-100); 
} 

und danach die Position der Farbeimer bei jeder Größenänderung des Fensters geändert.

$(window).resize(function(){ 
    $('.grid-container').css('margin-top',$('#home-carousel').height()-100); 
}) 

NB: Die -100 ist so der Eimer nicht richtig fällt unter dem Hintergrundbild