Image lässt sich nicht in css stylen?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
23.10.2021, 23:31

An deinem Selektor und dem Tag liegt es offensichtlich nicht (das height-Property kannst du übrigens weglassen, denn auto ist bereits der Standardwert).

Öffne zunächst die Webentwicklungstools deines Browsers, selektiere das img-Element im Selektor und schau nach, ob dein Selektor unter den Styles mit gelistet wird. Wenn ja, siehst du auch, ob deine Properties zum Einsatz kommen oder (wenn sie bspw. durchgestrichen sind) von anderen Properties überschrieben werden. In dem Fall benötigt dein Selektor eine höhere Spezifität.

Wenn du deinen Selektor nicht aufgelistet bekommst, wäre es an der Zeit, zu prüfen, ob dein CSS überhaupt in das Dokument geladen wird. Solltest du also eine externe CSS-Datei verwenden, ist sie entweder nicht im head-Bereich (über einen link-Tag) eingebunden oder konnte gar nicht erst gefunden werden. Die Browserkonsole informiert über gescheiterte Requests, du kannst aber auch im Network-Tab der Webentwicklungstools nachschauen, auf welche Requests dein Browser welche Antwort empfangen hat (Network-Tab öffnen, Seite neuladen).

Überprüfe in der Hinsicht die von dir angegebene URL. Achte auf eine korrekte Groß- und Kleinschreibung. Die CSS-Datei muss auf .css enden. Aktiviere in Windows also erst noch die Anzeige der Dateinamenserweiterung, falls nicht bereits getan.

Weitere mögliche Fehlerursachen:

  • Du hast deinen aktuellen Stand der CSS-Datei oder der HTML-Datei noch nicht gespeichert.
  • Du lässt dir die falsche Webseite im Browser anzeigen.
  • Dein Browser liefert dir einen gecacheten Zustand. Lade die Seite mit Ctrl + F5 neu oder leere explizit den Seitencache vor einem Neuladen.
EinAlexander  30.10.2021, 10:19
das height-Property kannst du übrigens weglassen,

Nicht wirklich

denn auto ist bereits der Standardwert

Das stimmt. Da man aber zur Reduzierung von Layoutverschiebungen im Browser und damit der Verbesserung des Cumulative Layout Shifts (CLS) für jedes Bildelement eine explizite Breite und Höhe mittels width und height Attribut festlegen soll:

<img src="http://www.placehold.it/200x100" width="200" height="100" alt="">

ist es ratsam, bei Bildern deren Breite in Abhängigkeit der Canvasgröße variieren können, im CSS die Höhe des <img>-Elements mit auto anzugeben.

Konkretes Beispiel:

<!doctype html>
<title>Bildgröße</title>
<style>
img#eins { width: 50%; }
img#zwei { width: 50%; height: auto }
</style>
<p><img id="eins" src="http://www.placehold.it/200x100" width="200" height="100" alt=""></p>
<p><img id="zwei" src="http://www.placehold.it/200x100" width="200" height="100" alt=""></p>

Hat das Bild dagegen eine fixe Breite, ist es unnötig, diese im CSS festzulegen. Dann genügt <img src=... alt=... width="200" height="100">. Die Regel 

.small_icon { width:60px }

wäre daher grundsätzlich "falsch" (weil sie entweder unvollständig oder überflüssig ist).

1
regex9  20.12.2021, 19:40
@EinAlexander

Ok, das speziell beim height-Property war mir neu. Darauf werde ich in Zukunft einmal mehr achten. So wie ich es mir nun angelesen habe, ist die initiale Vorgabe im CSS vor allem dazu da, das Bildverhältnis beizubehalten, während man mit den Attributen den Platz reserviert.

Lesenswert dazu:

0