Will man Bilder, unabhängig davon, welche Seite der verschiedenen Originalbilder die jeweils längere ist, in einer bestimmten Breite anzeigen und daran die Bild-Höhen proportional anpassen, kann man das per CSS bzw. per Style realisieren. So kann man beispielsweise eine feste Anzahl von kleinen unterschiedlich proportionierten Bildern nebeneinander in eine Zeile stellen oder einzelne Bilder exakt in der Postbreite anzeigen lassen, egal wie sie proportioniert sind. Und das ohne viel Aufwand.
Das ist nötig:
- Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen Kommandos für bestimmte Bild-Breiten eintragen, die künftig für alle Bilder gelten, die in Div-Containern mit einem entsprechenden Klassennamen stehen. (Beispiele siehe unten.)
- Im Verfassenmodus des Post-Editors die Bilder per Bildmenübalken auf "Originalgröße" einstellen. (Das bringt später die bestmöglichen Skalierergebnisse.)
- Im HTML-Modus des Post-Editors einen div-Container mit dem entsprechenden Klassen-Namen um den Bereich stellen, in dem sich die Bilder befinden. (Beispiele siehe unten.)
Beispiele für CSS-Kommandos:
/* Bilder innerhalb von Div-Containern der Klasse "achtzig" 80px breit anzeigen */
.achtzig img {
width: 80px;
height: auto;
}
/* Seitliche Außenabstände der Links um "achtzig" Bilder deaktiviert */
.achtzig a {
margin-right: 0px !important;
margin-left: 0px !important;
}
/* Seitliche Außenabstände der Tabellen um "achtzig" Bilder deaktiviert */
.achtzig table {
margin-right: 0px !important;
}
/* Bilder innerhalb von Div-Containern der Klasse "postbreite" 580px breit anzeigen */
.postbreite img {
width: 580px;
height: auto;
}
/* Seitliche Außenabstände der Links um "postbreite" Bilder deaktiviert */
.postbreite a {
margin-left: 0px !important;
margin-right: 0px !important;
}
/* Seitliche Außenabstände der Tabellen um "postbreite" Bilder deaktiviert */
.postbreite table {
margin-right: 0px !important;
}
Beispiele für Div-Container mit Klassennamen dazu:
<div class="achtzig">
Dazwischen: Die Codes der Bilder, die 80px breit angezeigt werden sollen
</div>
<div class="postbreite">
Dazwischen: Die Codes der Bilder, die in Postbreite angezeigt werden sollen
</div>
So sieht das dann aus:
 |
| 17 |
 |
| 21 |
 |
| 36 |
Damit nichts neben die links ausgerichtete Bildreihe rutscht, habe ich im HTML-Modus des Post-Editors den folgenden Code unter den Container gesetzt, in dem die ersten drei Bilder stehen:
<div style="clear: both;">
</div>
Nachteil:
Da die Bilder im Post-Editor dann alle auf "Originalgröße" stehen, kann man in besonderem Maße nur mit Hilfe der Vorschau kontrollieren, ob der Aufbau des Post okay ist.
Die Bilder in der Mobilversion:
Hat man die Mobilvorlage erfolgreich auf "Benutzerdefiniert" gestellt, dann werden die Bilder auch in der Mobilversion entsprechend angezeigt, sofern die Bilder durch die Kommandos schmaler sind als das Anzeigefenster. Was nicht in eine Zeile passt, rutscht untereinander. Sind die Bilder laut Kommando breiter als das Anzeigefenster, dann werden sie automatisch runter skaliert. Allerdings nur, wenn es sich um Bilder ohne Bildunterschrift handelt. Bilder ohne Bildunterschrift werden so nie breiter als das Anzeigefenster angezeigt. Breite Bilder mit Bildunterschrift sind dann jedoch breiter als das Smartphone-Display.
Hat man die Mobilvorlage nicht auf "Benutzerdefiniert" gestellt, dann sind die CSS-Kommandos in der Mobilversion nicht wirksam und die Bilder werden dort so unterschiedlich breit angezeigt, wie sie in der Originalversion sind. Sie sind aber auch dort nie breiter als das Anzeigefenster.
Beispiele für solche Bilder in einer benutzerdefinierten Mobilversion
Ute Ziemes, sg.utez.de,
0 Kommentare:
Kommentar veröffentlichen