Bilder ohne Bildunterschrift automatisch auf Postbreite skalieren

Mit Hilfe eines CSS-Kommandos kann man dafür sorgen, dass alle Bilder, die man in einem Post oder einer Seite hochlädt, auf Post-Breite skaliert angezeigt werden.

Ich nenne hier Kommandos für Layout-Vorlagen und für Dynamische Ansichten, die bei Bildern ohne Bildunterschrift erfolgreich sind und auch in der Mobilversion des Blogs passend angezeigt werden.

---

Voraussetzungen (um die bestmögliche Bild-Qualität zu erzielen):

• Hochgeladen in Originalgröße
• Im Bildmenübalken eingestellt auf Originalgröße

Eintrag des CSS-Code

Eintragen unter Vorlage > Anpassen > Erweitert > CSS hinzufügen:

Bei Layout-Vorlagen einzutragen:

/* Bilder ohne Bildunterschrift innerhalb Posts und Seiten auf Postbreite skaliert */
.post-body img {
width:100%;
height:auto;
}

Bei Dynamischen Ansichten einzutragen:

/* Bilder ohne Bildunterschrift innerhalb Posts und Seiten auf Postbreite skaliert */
.article-content img {
width:100%;
height:auto;
}

width:100% bedeutet, dass das Bild so breit wie der Post angezeigt werden soll. height:auto bedeutet, dass die Höhe sich proportional stimmig daran anpassen soll. In der Mobilversion des Blogs, also in Smartphones werden die Bilder dann so breit wie der Smartphone-Bildschirm angezeigt.


Im Blogger-Editor ist die Kontrolle des Post-Layout jedoch durch die Bilder, die da in Originalgröße stehen, erschwert und man muss in besonderem Maße die Vorschau zurate ziehen.

Einzelne Bilder ausnehmen

Die einfachste Methode, einzelne Bilder vom Skalieren auszunehmen, ist es, Ihnen eine Bildunterschrift hinzuzufügen. (Man muss dazu nur im Bildmenübalken das Bildunterschriftsfeld aktivieren, tatsächlich darin stehen muss nichts.)

Wieso die Kommandos bei Bildern mit Bildunterschrift nicht funktionieren

Bei Bildern mit Bildunterschrift wirkt das Kommando nicht, weil sie innerhalb von Bild-Tabellen stehen und diese keine Breite vorgeben, sondern umgekehrt der Tabelleninhalt die Breite der Tabelle bestimmt. Deshalb wirkt hier nur die Einstellung, die man über den Bildmenübalken vorgegeben hat. Wollte man auch diese Bilder automatisch auf Postbreite skalieren, dann müsste man einen px-Wert in das CSS-Kommando anstelle der 100% eintragen.

Das Skalieren von Bildern mit Bildunterschrift macht aber nur in Blogs Sinn, die keine mobile Version anbieten; denn da werden Bilder, die mit individuellen Maßen ausgestattet in Bild-Tabellen stehen, nicht auf die Breite des Mobilgeräts runterskaliert, Bilder ohne Bildunterschrift schon.

Ute Ziemes, sg.utez.de, 2014-08-01, Änderungen: 2014-08-03, 2016-02-03