[Résolu] Changer la class d'une image en fonction de sa taille

Bonjour,

Voila mon problème, j'aimerais faire en sorte de changer la class d'une image en fonction de la taille de celle-ci.
De base j'ai une image en format paysage (image 1 sur la photo), mais si cette image peut être amenée à changer pour une image dont les dimentions seront plus carrée (image 2 sur la photo).
La personne pour qui je fais ça n'a pas envie de toucher au code, j'ai donc fait une fonction javascript qui récupère la taille de l'image et qui change sa taille si le width est supérieur à 2 fois le height, et qui s'éxécute au lancement de la page (avec onload).

	function classImage(){
// On récupère la hauteur et la largeur de l'image
		alert("width : "+img.width+"\nheight : "+img.height);
		var x = img.width ;
		var y = img.height ;

// On attribue à l'image la class logo si ça largeur est 2 fois plus haute que ça hauteur. Sinon on applique la class logo_petit
	    if (x>y+y){
	        	document.getElementById('logo').className = « logo »
	        }
	    else{
	       	        document.getElementById('logo').className = « logo_petit »
	    	}
	}

Malheuresement le code ne fonctionne pas mais je pense que l'érreur vient du : if (x>y+y).
Mais je ne sais pas par quoi le changer.

Merci d'avance pour votre aide.

Merci bazooka07,

En mélangent ton code avec le mien j'ai réussi à faire ce que je voulais ^^.
Mon <img> ayant l'id #logo n'a pas d'autre class et ne devrait pas en avoir à l'avenir donc j'évite ce risque.

Je met le code modifier ici si jamais ça peut aider d'autre personne à l'avenir :

	function classImage(){
// On définie la variable image
		var img = document.getElementById('logo');
// On récupère la hauteur et la largeur de l'image
		console.log("width : "+img.width+"\nheight : "+img.height);
		var x = img.width ;
		var y = img.height ;
		var logo = 'logo';
		var logo_petit = 'logo_petit';

// On attribue à l'image la class logo si sa largeur est 2 fois plus haute que sa hauteur. Sinon on applique la class logo_petit
	    if (x > 2 * y)
	        {
	        	document.getElementById('logo').classList.add(logo);
	        }
	    else
	        {
	       		document.getElementById('logo').classList.add(logo_petit);
	    	}
	}

Il vaut mieux ne conserver qu'une class et l'ajouter ou la retirer avec add ou remove.
Pour gérer les règles CSS, cela sera plus sûr.
Tu prévois un affichage par défaut. Et s'il y a une class logo_petit, tu modifies l'affichage

Pour afficher ou cacher un élément, on fait la même chose en utilisant une class "active". C'est un "use case" courant