web-dev-qa-db-fra.com

Supprimer la hauteur auto en utilisant css

J'ai des images qui ont la largeur et la hauteur en html mais il y a aussi une feuille de style affectant ces images avec height auto

Comment réinitialiser/remplacer cette propriété en utilisant css afin que la hauteur html entre en vigueur?

Html:

<img src="..." width="350" height="150" />

Css:

img {
  height: auto;
}

JSFiddle

Plus d'informations:
J'implémente img lazyload dans un environnement que je ne maîtrise pas totalement (PrestaShop eCommerce).
Sur le document prêt, je mets l’img src sur un pixel transparent, mais comme le montre js-fiddle, l’image apparaît au carré bien qu’elle n’ait pas la même largeur/hauteur en html.
La hauteur suit la largeur en raison de la hauteur auto prop.
Cela conduit à "sauter" et aussi à quelques bugs lorsqu'un script définit le style de hauteur sur une valeur incorrecte.

htmlcssheight
6
UnLoCo

Bien que cette réponse semble un peu économique, je crois vraiment que c'est la réponse que vous recherchez ...

Tu ne peux pas. 

Une fois que vous avez défini height sur img en CSS, la déclaration HTML est immédiatement remplacée. Il n’ya pas d’autre moyen dans la CSS d’utiliser ensuite ignorer cette déclaration et d’utiliser la hauteur spécifiée par HTML, car des éléments comme initial font référence à des propriétés définies par CSS ( source ), attributs HTML non associés.

Consultez cette référence pour CSS Height , qui répertorie toutes les valeurs de propriété: * Valeurs expérimentales/non supportées omises

hauteur: auto | longueur | % | hériter | initiale 

Si vous essayez de redéfinir la height de img en utilisant l'une des valeurs de propriété ci-dessus, elles ne fonctionneront pas. Je viens d'essayer chacune d'entre elles pour en être sûre.

  • _ {length et % requièrent une hauteur définie, ce qui semble être exactement ce que vous essayez d'éviter

  • initial va juste récupérer la déclaration CSS initiale de height: auto;

  • inherit n'a pas d'ancêtre à hériter, il est donc remplacé par défaut par auto

Votre seul véritable choix est de remplacer la hauteur en CSS, en utilisant des styles en ligne (comme suggéré par Carter ) ...

<img style="height: 150px;" />

Ou en appliquant des sélecteurs tels que des identifiants ou des classes ...

<img id="my_image" />

#my_image {
    height: 150px;
}

Ou, si vous devez utiliser JS pour générer automatiquement les remplacements, envisagez quelque chose comme cette solution jQuery:

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t is the current iteration
    var ht = $t.attr("height");   //Get the HTML height
    ht = ht ? ht+"px" : "auto";   //If HTML height is defined, add "px" | Else, use "auto"
    $t.css("height", ht);         //Apply the height to the current element
});

Cela parcourt toutes les images de la page et applique une hauteur CSS pour correspondre à la hauteur HTML. S'il n'y a pas de hauteur HTML, il utilisera height: auto;.

10
Tyler Roper

Vous pouvez utiliser des CSS en ligne pour remplacer vos autres CSS. La hauteur img ne remplace pas le css car c'est du HTML, vous devez donc utiliser <img src="..." width="350" style="height:150px;" />

6
Carter

La meilleure pratique consiste à ne pas définir globalement toutes les balises img avec une hauteur dominante. Si vous le pouviez, changez cette déclaration en:

img.auto-height {
  height: auto;
}

Et partout où vous devez avoir une hauteur automatique sur une image, ajoutez ensuite class="auto-height"

2
Adrianopolis

Vous pouvez remplacer la hauteur avec:

height: unset;

La prise en charge du navigateur est tout sauf IE

1
jabko87

Bien que ce ne soit pas exactement le cas, il existe deux autres moyens de contourner le problème.

  • Ajuster la hauteur via le parent

div img { height: 150px; }

  • Ou avec un pseudo-selector

img:nth-child(1n){ height: 150px; }

img:nth-child(1n){
  height: 150px;
}
img {
  height: auto;
}  
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="width="350" height="150">

1
Evan