Ajouter une classe CSS en fonction du ratio d'image avec JavaScript/JQuery

Question

Je crée une galerie d'images avec des dizaines d'images en mode paysage et portrait sur une seule page. Je veux styliser chaque image avec une classe CSS ajoutée dynamiquement (c'est-à-dire ".landscape" pour les images de paysage) en fonction de son orientation.

Je suis tombé sur le code ci-dessous (à partir de 2003!) Pour déterminer le rapport et ajouter une classe pour une seule image, mais j'ai besoin que les classes soient automatiquement ajoutées pour toutes les images d'un ID div. Honnêtement, je ne connais pas assez JavaScript ou JQuery pour résoudre ce problème par moi-même.

Toute aide ou un point dans la bonne direction est grandement appréciée!

<script language="JavaScript" type="text/javascript"> 
<!-- 
function getDim() { 
myImage = new Image; 
myImage.src="myimage.gif";//path to image 
document.divImage.src=myImage.src; 
var imgProp; 
var width = myImage.width; 
var height = myImage.height; 
var ratio = width/height; 
if (ratio > 1) { 
document.getElementById('image').className="portrait"; 
} 
else { 
document.getElementById('image').className="landscape"; 
} 
} 
//--> 
</script> 

Answer 1

avec jQuery:

$('#divID img').each(function(){ 
    $(this).addClass(this.width > this.height ? 'landscape' : 'portrait'); 
}); 

Answer 2

Assez simple jQuery:

$('#yourId').find('img').each(function(i,elem){ 
    var $this = $(this), 
     ratio = $this.width()/$this.height(); 

    $this.addClass((ratio < 1) ? 'portrait' : 'landscape'); 
}); 

See example →

Answer 3

permet de dire, que votre div contenant est de classe gallery et que vous utilisez jQuery:

$(document).ready(function(){ 
    $('.gallery img').each(function(){ 
     var width = $(this).width(); 
     var height = $(this).height(); 
     var className; 
     if (width/height > 1) className = "portrait"; 
     else className = "landscape"; 
     $(this).addClass(className); 
    }); 
}); 

De cette façon est plus longue, mais vous permet d'ajouter plus de règles (s'il n'y a aucune raison de le faire :) .. .:-à-dire

if (width/height == 1) className = "square"; 

Answer 4

Si img réglage largeur/hauteur interfère avec votre css , vous pouvez le définir comme des données de largeur/hauteur données:

$('#your-div-Id').find('img').each(function(i,elem){ 
     var $this = $(this), 
      ratio = $this.attr('data-width')/$this.attr('data-height'); 
     $this.addClass((ratio < 1) ? 'portrait' : 'landscape'); 
    }); 

HTML:

<div id="your-div-Id"> 
    <img src="#" data-width="60" data-height="30" /> 
</div> 

Edited mVChr's example