webentwicklung-frage-antwort-db.com.de

Höhe automatisch mit css entfernen

Ich habe Bilder, die Breite und Höhe in HTML haben, aber es gibt auch ein Stylesheet, das diese Bilder mit der Höhe Auto beeinflusst

Wie kann man diese Eigenschaft mit css zurücksetzen/überschreiben, damit die HTML-Höhe wirksam wird?

Html:

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

Css:

img {
  height: auto;
}

JSFiddle

Mehr Info:
Ich implementiere img lazyload in einer Umgebung, die ich nicht vollständig kontrolliere (PrestaShop eCommerce).
Wenn das Dokument fertig ist, stelle ich img src ein transparentes Pixel ein, aber wie die js-Geige zeigt, wird das Bild quadratisch dargestellt, obwohl es in html nicht die gleiche Breite/Höhe hat.
Die Höhe folgt der Breite wegen der Höhe des Auto-Propellers.
Dies führt zu "Sprüngen" und auch zu einigen Fehlern, wenn ein Skript den Höhenstil auf den falschen Wert setzt.

htmlcssheight
6
UnLoCo

Diese Antwort fühlt sich zwar etwas billig an, aber ich glaube wirklich, dass es die Antwort ist, nach der Sie suchen ...

Das kannst du nicht.

Sobald Sie in CSS ein height für das img gesetzt haben, wird die HTML-Deklaration sofort überschrieben. In der CSS gibt es keine weitere Möglichkeit, diese Deklaration ignorieren und die HTML-spezifizierte Höhe zu verwenden, da sich Dinge wie initial auf CSS-definierte Eigenschaften beziehen ( source ), nicht zugeordnete HTML-Attribute.

In dieser Referenz finden Sie CSS Height , das alle Eigenschaftswerte auflistet: * Experimentelle/nicht unterstützte Werte nicht angegeben

höhe: auto | Länge | % | erben | Initiale

Wenn Sie versuchen, height von img mit einem der oben genannten Eigenschaftswerte neu zu definieren, funktionieren diese nicht - ich habe nur jeden einzelnen ausprobiert, um sicherzugehen.

  • length und % erfordern eine definierte Höhe, was genau das zu sein scheint, was Sie vermeiden wollen

  • initial ruft nur die anfängliche CSS-Deklaration von height: auto; auf.

  • inherit hat keinen zu erbenden Vorfahren, daher wird auf den Standardwert von auto zurückgegriffen

Ihre einzige wirkliche Wahl ist, die Höhe in CSS zu überschreiben, entweder mit Inline-Stilen (wie von Carter vorgeschlagen) ...

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

Oder indem Sie Selektoren wie IDs oder Klassen anwenden ...

<img id="my_image" />

#my_image {
    height: 150px;
}

Wenn Sie JS zum automatischen Generieren der Überschreibungen verwenden müssen, sollten Sie Folgendes in Betracht ziehen:

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

Dies durchläuft alle Bilder auf der Seite und wendet eine CSS-Höhe an, die der HTML-Höhe entspricht. Wenn es keine HTML-Höhe gibt, wird height: auto; Verwendet.

12
Tyler Roper

Sie können Inline-CSS verwenden, um Ihre anderen CSS zu überschreiben. Die Img-Höhe überschreibt die CSS nicht, da sie HTML ist. Sie müssen also <img src="..." width="350" style="height:150px;" /> verwenden.

6
Carter

Best Practice ist, nicht alle img-Tags mit überschreibender Höhe global zu definieren. Ich würde, wenn Sie können, diese Erklärung ändern in:

img.auto-height {
  height: auto;
}

Und überall, wo Sie eine automatische Höhe für ein Bild benötigen, fügen Sie class="auto-height" hinzu.

2
Adrianopolis

Sie können die Höhe mit überschreiben:

height: unset;

Browser-Unterstützung ist alle außer IE

1
jabko87

Es ist zwar nicht genau zu entfernen, aber es gibt ein paar andere Möglichkeiten, wie Sie es umgehen können.

  • Stellen Sie die Höhe über das übergeordnete Element ein

div img { height: 150px; }

  • Oder mit einem 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