Warum greift width/height-Angabe bei Bild nicht?

    Hallo,
    vielleicht kann mir jemand erklären, warum bei einem großen Bild mit den tatsächlichen Maßen von 736 x 414px die manuell im Code korrigierte kleinere width/height-Angabe von 368 x 207px keinerlei Wirkung zeigt?

    Das Bild wird nach Einfügung mit ca. 650px Breite angezeigt, also der max. Spaltenbreite für den Content (Artikel). Diese max. Spaltenbreite wird respektiert, also das Layout nicht zerstört, aber die von mir gewünschte kleine Größe bleibt unbeachtet.

    Ich habe in meinem CSS-Stylesheet für alle einzelnen Content-Bilder
    max-width: 100%;
    height: auto;

    festgelegt, aber da es ein "max"-width ist, sollte das doch den manuellen width/height-Angaben nicht im Wege stehen?

    Der img-Code nach Einfügen des Bildes sieht so aus:
    <img src="http://www.der-weg-nach-hause.de/wp-content/uploads/blabla.jpg" alt="blabla" width="736" height="414" class="aligncenter size-full wp-image-310" />

    Wenn ich jetzt width/height manuell ändere und sogar das "size-full" lösche, bringt das beides leider gar nichts.

    Hat jemand eine Erklärung?

    Grüße,

    Autor33

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Um das Bild mit der gewünschten Größe darzustellen, müsstest du mal testen, ob...
    width: 100%;
    max-width: 'deine-Breite'px;
    dich deinem Ziel näher bringt.

    @b3317133:
    Es ist nur eine Testseite (eine Kopie einer bestehenden Seite), die möglichst nicht "öffentlich" registriert werden sollte und die ich bislang nur als Entwurf gespeichert habe (Preview/draft). Weiß nicht, ob es da eine Möglichkeit gibt...Vielleicht wenn ich richtig speichere und dann die URL per PN mitteile, aber eine PN hier wird von Crawlern ebenfalls gelesen, schätze ich.
    Kann ich noch weitere Infos nachliefern, die du brauchst?

    Vielleicht noch wichtig: Die automatische responsive-Funktion von WP, die beim Hochladen versch. Größen erstellt und per srcset einfügt, habe ich in den media-Settings deaktiviert (überall "0" eingetragen). Deshalb bekomme ich beim Hochladen von Bildern bei den Attachment-Angaben nur "full-size" als einzige Option. Aber wie gesagt, selbst wenn ich das lösche im img-tag, ändert es nichts.

    @Sailor56:
    Die Breite zwei Mal definieren?
    Diese CSS-Anweisung in meinem Stylesheet betrifft alle Bilder. Wenn ich das so ändere, hat das Auswirkung auf die Anzeige aller anderen Bilder meiner Site, vermute ich?

    Grüße,

    Autor33

    Im Customizer habe ich bislang noch nie etwas gemacht... aber in die Customizer-Box für CSS-Code ein paar Zeilen reinkopieren und speichern schaffe ich noch.
    Also wenn ich mit dem FF auf das Bild klicke und per "Element untersuchen" den Inspektor aktiviere, sehe ich rechts u.a. folgenden Code:
    .block-type-content div.entry-content img {
    max-width: 100%;
    height: auto;
    width: auto;

    Das müsste ich nun abändern wir vorgeschlagen und noch den Selektor für genau das eine Bild ergänzen bei .block-type-content div.entry-content img ?


    width: 100%;
    max-width: 368px;
    height: auto;
    width: auto;

    Wäre dann wohl richtig, 368px ist die gewünschte kleine Breite, die nicht angezeigt wird.

    Was ist der Selektor für genau dieses Bild? Kommt da das wp-image-310 hinten noch dazu, also dann:
    .block-type-content div.entry-content img wp-image-310 ?

    Das 'width: auto;' musst du weglassen... du hast eine width-Angabe und das zweite width macht das erste ungültig.... zwei überschreibt eins!
    könnte sein, dass wp-image-310 richtig ist.. aber wenn, dann ist es wahrscheinlicher, dass es die Klasse des Bildes ist und dann wäre der Selector:
    .block-type-content div.entry-content img.wp-image-310

    Aber versuche es zunächst mit '.block-type-content div.entry-content img' (ohne das width:auto;) und schau, was passiert.
    Sollten dann mehr als das/die Bild/er in einem anderen, als dem gewünschten Format dargestellt werden, kannst du immer noch den anderen Selektor testen.

    Laut https://codex.wordpress.org/Styling_Images_in_Posts_and_Pages ist wp-image-"zahl" eine CSS-Klasse und der img-tag (siehe Eröffnungspost) legt das auch nahe. Die "Zahl" wird immer um eins höher, mit jedem Bild, das neu hochgeladen wird.

    Also

    .block-type-content div.entry-content img.wp-image-310
    {
    width: 100%;
    max-width: 368px;
    height: auto;
    }
    so in die CSS-Box kopieren.

    Nur mal probespeichern mit "Save Draft" oder gleich "Publish"?
    Dann sollte das Bild kleiner erscheinen.

    Apropos draft, die Seite mit dem Bild ist bislang nur als draft gespeichert. Macht das was?

    Habe es eben probiert und selbst ganz ohne Speichern sehe ich das Bild dann rechts auf die gewünschte Größe verkleinert.
    Das klappt also.

    Was heißt das jetzt, im Hinblick auf das Ignorieren der manuellen width/height-Angabe?

    Es klappt... wo hast du dann ein Problem mit 'ignorierten' Angaben?
    Zumal im (validen) CSS eigentlich keine Angabe ignoriert wird. Es ist nur möglich, dass eine Formatierung an anderer Stelle, von einer höher priorisierten Formatierung überschrieben wird... Ober sticht Unter!
    Zum Einlesen in diese Thematik kann ich nur empfehlen, mal die Suchmaschine deines Vertrauens zu befragen -
    ein netter und leicht verständlicher Einstieg dazu könnte das sein:
    https://wiki.selfhtml.org/wiki/CSS/Tutor…instieg/Kaskade

    Zitat von Sailor56

    Es klappt... wo hast du dann ein Problem mit 'ignorierten' Angaben?
    Zumal im (validen) CSS eigentlich keine Angabe ignoriert wird. Es ist nur möglich, dass eine Formatierung an anderer Stelle, von einer höher priorisierten Formatierung überschrieben wird... Ober sticht Unter!

    Wie im Eingangspost beschrieben. Wenn ich das Bild hochlade bzw. einfüge, steht da im img-tag für width und height zunächst die volle, tatsächliche Größe, zusammen mit "size-full". Wenn ich im Editor dann aber im img-tag für width/height die gewünschten kleineren Größen manuell reinschreibe (und size-full lösche) und speichere, bleibt das Bild dennoch groß, so groß wie die Spaltenbreite hergibt. Die manuell eingegebenen kleinen Größen werden also ignoriert. Ganz egal, welche width/height-Werte ich reinschreibe, es hat keinen Effekt.

    <img src="http://www.der-weg-nach-hause.de/wp-content/uploads/blabla.jpg" alt="blabla" width="736" height="414" class="aligncenter size-full wp-image-310" />

    mache ich manuell im Editor zu

    <img src="http://www.der-weg-nach-hause.de/wp-content/uploads/blabla.jpg" alt="blabla" width="368" height="207" class="aligncenter wp-image-310" />
    was ohne Effekt auf die angezeigte Bildgröße bleibt.

    Welches höherrangige CSS soll die nachträgliche, manuelle width/height-Angabe da übertrumpfen? Das war ja meine Ausgangsfrage. Ich weiß ansonsten nur noch von dem beschriebenen max-width im Stylesheet.

    Deine Frage lässt vermuten, dass du mit den Grundlagen wenig vertraut bist.
    Aber ok... ist vielleicht auch nicht ganz so einfach zu verstehen, deswegen versuche ich es mit einfachen Worten verständlich zu machen. Die Fachleute mögen mir verzeihen, wenn es dadurch zu vereinfachend dargestellt wird.
    Zunächst mal haben diese Tag-Erweiterungen (width="xxx" und height="yyy") wenig bis gar nichts mit CSS zu tun. Das sind Überbleibsel aus einer veralteten HTML-Welt, die spätestens seit HTML 5 eigentlich gar nicht mehr verwendet werden sollten.
    Diese veralteten HTML Elemente sind die am wenigsten priorisierten Formatierungsanweisungen, die man verwenden kann und werden nur wirksam, wenn es keine anderen Formatierungen (zB in eine Stylesheet) gibt. Da kann man reinschreiben was man will... sobald irgendwo im CSS eine auf dieses Element bezogene Formatierung steht, dann gilt die CSS Anweisung, die HTML Vorgabe wird überschrieben.
    Innerhalb des CSS gibt es dann eine Wertigkeit, wie die hier festgelegten Formatierungen vom Browser abgearbeitet und umgesetzt werden.
    Wie hochwertig eine Formatierung ist hängt von mehreren Faktoren ab - zunächst mal davon, wie exakt das Element angesprochen wird.
    Die Ansprache eines Elementes erfolgt über CSS-Selektoren - und da wäre zB 'img' minderwertiger als 'img.wp-image-310'. Da gilt generell, je genauer der Selektor auf das Element zutrifft, desto höherwertiger ist die Anweisung.
    Ebenso spielt die Reihenfolge der Anweisungen im Stylesheet eine Rolle. Sind mehrere gleichwertige Formatierungen vorhanden, dann gilt immer die letzte.... also wenn du im Stylesheet vorgibst... img {width: 100%;} und irgendwo dahinter dann sagst img {width: 365px;}, dann gelten die 365px für alle Elemente, die sich vom Selektor 'img' angesprochen fühlen und nicht von einem höherwertigen Selektor anders formatiert werden.

    Aber wie schon gesagt, eine Suchmaschine ist dein Freund. Zu diesem Themenbereich gibt alles was du wissen willst, dich nur bisher nicht getraut hast zu fragen, in tausendfacher Ausführung im Netz.

    Hallo Sailor56,
    danke für deine Ausführungen.

    Dass es eine CSS-Hierarchie gibt und offenbar irgendeine CSS-Anweisung die manuelle width/height-Angabe overrult, war zu vermuten.
    Deshalb fragte ich im Eingangspost, ob die einzig mir bewusst gesetzte Anweisung im Stylesheet
    max-width: 100%;
    height: auto;
    dafür verantwortlich sein kann, da es doch ein max-width ist, das nichts gegen die von mir gewünschte kleinere Größe haben sollte.

    Die Frage ist nun aber eine, die über die Theorie des CSS-Stylings hinaus schon ganz konkret ist, bezogen auf die betreffenden Bilder, von denen jede Seite genau eines hat:
    Wie bekomme ich heraus, welches overrulende Styling das ist?
    Zeigt der Firefox-Inspektor nicht alle gültigen CSS-Styles für das betreff. Element an, so dass man es damit herausfinden können sollte? Ich kann dessen Anzeigen hier posten.

    Wenn ich die manuellen size-Größen nicht zum Wirken bekomme, kann ich dann einfach eine neue CSS-Klasse für diese Bilder erstellen (im Stylesheet), die z.B. eine 50%ig verkleinerte Anzeige bewirkt, ohne die responsive-Anpassung beim z.B. Smartphone durch das obige max-width: 100% völlig zu eliminieren?

    Vielleicht sollte ich die Testseite einfach auf noindex setzen und hier posten... wahrscheinlich hat jemand dann in 5 Minuten herausgefunden, welches "heimliche Theme-CSS" (vermute ich) die Bilder das width/height ignorieren lässt.

    Mit dem Inspektor (zB vom FireFox) bekommst du das sogar sehr genau angezeigt.
    Von dem Element, das du auf der linken Seite ausgewählt hast, werden ja im rechten Teil alle relevanten CSS Formatierungen angezeigt - ebenso siehst du da den/die im CSS verwendeten Selektoren und kannst auch erkennen, welches der dort gesetzten Formate an anderer Stelle überschrieben wurde. Die Überschriebenen werden in der Liste 'durchgestrichen' dargestellt.
    Wenn du jetzt eine Formatierung 'manuell' ändern willst, dann suche in dieser Liste den Selektor, mit dem die gewünschte Eigenschaft eingestellt wird (nicht durchgestrichen) und füge mit genau diesem Selektor die neue, manuelle Formatierung in das zusätzliche CSS im Customizer ein...
    Sollten dann mehr als nur das/die Element(e) von der Änderung betroffen sein, als du beabsichtigst, dann muss der Selektor ggf noch weiter spezifiziert werden... also zB nicht nur img sondern img.wp-image-310.
    ja.. ich habe gelesen, dass du da noch nie was eingetragen hast, das ist aber ein Fehler von dir, denn genau dafür ist das zusätzliche CSS da!
    Es wird vom Browser als letztes gelesen und erfüllt damit schon mal automatisch die Bedingung, dass das zuletzt gelesene Formt gilt... weil alle vorherigen eben dadurch überschrieben werden.
    Eigene CSS Klassen würde ich nur im allergrößten Notfall einführen - die werden auf jeden Fall bei jedem Update wieder gelöscht. Ich würde nur die schon vorhandenen CSS Klassen nutzen
    Ebenso niemals CSS Änderungen in den Theme-Dateien durchführen, auch die sind weg, wenn ein Update kommt. Das zusätzliche CSS bleibt aber immer erhalten, überlebt also einen Update.
    Wenn es um responsive Design für Smartphone und Co geht, solltest du dich mit MediaQueries beschäftigen.

    Bei dem Fall mit dem Bild, dürfte das aber nicht nötig sein, denn in der Kombination..
    width: 100%;
    max-width: (irgendwas)px;
    passt sich die Bildgröße automatisch an jedes Display an... es ist immer 100% breit, aber nie breiter als (irgendwas)px.

    Als kleiner Hilfepunkt... schau dir mal dieses Video an.

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Ha, ich hab's gefunden!
    Im FF-Inspektor kann man rechts dann ja testweise einzelne Stylings deaktivieren und deren Effekt wird auch sofort auf der Seite angezeigt (gutes Tool!).

    Ich sehe rechts ganz oben für das Bild folgendes Styling:
    .block-type-content div.entry-content img {
    max-width: 100%;
    height: auto;
    width: auto;
    }

    Wenn ich das width: auto deaktiviere im Inspektor, dann erscheint das Bild mit der manuell eingefügten kleinen width/height-Größe (368x207), d.h., dann wird das manuelle width/height nicht mehr ignoriert.

    Hier die zwei Bilder, ohne und mit der Deaktivierung des "width: auto" im FF-Inspektor:

    Aber wo kommt das width: auto her?
    Wenn ich das weiß, sollte ich dieses Styling dann tatsächlich löschen wie beim obigen Test? Ich sehe zwar keine Auswirkungen auf den Rest der Seite beim deaktivierten "width: auto", aber irgendeinen Sinn wird es schon haben?

    Mein Stylesheet des Themes ist ziemlich groß und auf eine Anweisung mehr oder weniger käme es nicht an... Dann hätte ich alles an einem Platz und könnte den zusätzlichen Style aussagekräftig kommentieren.

    Du hörst (bzw. liest) mir nicht zu - oder?
    Wenn du gerne meine Empfehlungen in Sachen CSS ignorieren magst, dann mach einfach. Solltest dich aber dann nicht wundern wenn die Arbeit, die du jetzt in das Projekt steckst, irgendwann durch die Originaldateien überschrieben werden und du wieder von vorne anfangen musst.
    Außerdem, wie kommst du jetzt wieder auf den Selektor '.block-type-content div.entry-content img'?
    Du warst doch schon mit dem '.block-type-content div.entry-content img[COLOR=#ff0000].wp-image-310[/COLOR]' einen Schritt weiter - oder seh ich das verkehrt?

    Zitat von Sailor56

    Du hörst (bzw. liest) mir nicht zu - oder?
    Wenn du gerne meine Empfehlungen in Sachen CSS ignorieren magst, dann mach einfach. Solltest dich aber dann nicht wundern wenn die Arbeit, die du jetzt in das Projekt steckst, irgendwann durch die Originaldateien überschrieben werden und du wieder von vorne anfangen musst.

    Was genau meinst du, das Stylesheet vom Theme, wenn ich dort etwas ändere/ergänze? Das wird bei Updates nicht überschrieben. Hast du selbst geagt und ich habe es bei diversen Updates vom Theme auch immer so wahrgenommen.


    Zitat von Sailor56


    Außerdem, wie kommst du jetzt wieder auf den Selektor '.block-type-content div.entry-content img'?
    Du warst doch schon mit dem '.block-type-content div.entry-content img[COLOR=#ff0000].wp-image-310[/COLOR]' einen Schritt weiter - oder seh ich das verkehrt?

    "Ich" komme auf diesen Selektor nicht. Der steht halt rechts beim FF-Inspektor und gilt für alle Contentbilder - auch, aber nicht nur für dieses Testbild auf der Testseite.
    "wp-image-310" haben wir beim Customizer-Test zusätzlich angegeben, um den Test aussagekräftig nur auf genau dieses eine Bild zu beschränken und nicht auf alle Contentbilder, da es ja eine bestehende Live-Website mit noch anderen Bildern ist, die unberührt bleiben sollten.

    Es geht nicht nur um ein einziges Bild. Wie ich bereits schrieb, ist es auf jeder Seite genau ein solches Bild, also eines, das relativ groß ist, aber zunächst mal kleiner dargestellt werden soll. Es ist aber nicht immer das genau gleiche eine Bild, sondern auf jeder Seite ein anderes.
    Deshalb meine Überlegung, mit einer zusätzlichen Klasse all jene Bilder zu erfassen, aber so, dass die responsive-Funktion erhalten bleibt.


    Das ursächliche width: auto kommt übrigens doch von meinem Stylesheet und scheint speziell für einen Bug des alten IE 8 gedacht zu sein. Ich habe das wohl seit Jahren immer wieder stillschweigend mit übernommen.
    Dort steht:
    .block-type-content div.entry-content img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie 8 */

    Also width: auto im Stylesheet einfach löschen, bei den betreff. Bildern die kleinen Größen manuell angeben und das war's?
    IE8 nutzt keiner mehr, denke ich mal.

    Zitat von b3317133

    Deaktiviere Dein Cache- bzw. Minify-Plugin, dann siehst Du die echte Quelldatei anstelle general-xxx.css im Inspector.

    Danke für den Hinweis, ist mir gar nicht aufgefallen, dass rechts daneben die Quelle zu finden ist. Habe die Quelle schon gefunden, ist wie gesagt doch das Theme-Stylesheet mit einer Anweisung für den IE8, siehe posting Nr. 18.
    Es wäre übrigens ein internes Caching meines Themes, kann das auch sein? Ein Caching-Plugin habe ich keines.

    Zitat von Autor33

    Was genau meinst du, das Stylesheet vom Theme, wenn ich dort etwas ändere/ergänze? Das wird bei Updates nicht überschrieben. Hast du selbst geagt und ich habe es bei diversen Updates vom Theme auch immer so wahrgenommen.


    ... hmmm... hab ich das?

    Zitat von Sailor56

    Und mache bitte keine Änderungen in den Stylesheet deines Themes - dafür nutzt man das zusätzliche CSS des Customizers!


    post #5

    Zitat von Sailor56

    Ebenso niemals CSS Änderungen in den Theme-Dateien durchführen, auch die sind weg, wenn ein Update kommt. Das zusätzliche CSS bleibt aber immer erhalten, überlebt also einen Update.


    post #14

    Zitat von Autor33

    ...doch das Theme-Stylesheet mit einer Anweisung für den IE8,....


    Wenn es nur für den IE8 gilt, dann gehört es in eine 'Browserweiche' (https://www.mediaevent.de/css/conditional-comments.html) wenn das der Entwickler deines Themes/Plugins/Was_auch_immer so in das Stylesheet geschrieben hat, dann gehören im die Ohren gerubbelt!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden