Bild-Ausrichtung auf Smartphone

[radobo]

Content-Elemente mit rechts oder links hinzugefügtem Bild werden auf dem Smartphone im Hochformat-Modus immer untereinander dargestellt. Das ist nur bedingt schön, aber hinzunehmen. Handelt es sich um ein Querformat-Bild, habe ich die responsiven Foto-Abmessungen so eingerichtet, dass diese die volle Breite einnehmen. Das entspricht dem, was man in der Anzeige z.B. von Facebook gewohnt ist. Problem sind die Hochformat-Bilder. Die nehmen zuviel Platz in der Höhe ein, wenn man sie seitenbreit anzeigt, also zeige ich sie kleiner an. Allerdings stehen sie stets linksbündig. Schön wäre, wenn man sie mittig platzieren könnte, wie es z.B. bei Wikipedia gemacht wird. Aber ich finde keine Möglichkeit, auf die Platzierung Einfluss zu nehmen. Gibt es vielleicht einen hilfreichen Trick?

[lucina]

Mal aus dem Bauch heraus etwas á la

@media (max-width:480px){
img{
display:block;
width:100%;
padding: 0 1em;}
}

(Results may vary - in Abhängigkeit von Deinem sonstigen CSS-Code)

[mlweb]

Oder so etwas (auch aus dem Bauch).

@media (max-width:480px){
.float_left,
.float_right {
text-align: center;
}
}

Dann darf das img-Element aber nicht als Blockelement verwendet werden.

Bei solchen Problemen ist übrigens ein Link zur Seite für die Helfenden immer gut.

[radobo]

Wow, Spitze! Ich bin immer wieder begeistert, wie schnell ich hier Hilfe bekomme! An die Lösung, ein weiteres css-Element einzuführen, habe ich gar nicht gedacht, wäre dann aber auch nicht auf diesen Code gekommen. Ich habe, weil es mir wegen des darin vorkommenden Wortes "center" vielversprechender erschien, die Variante von lucina probiert. Zunächst ein neues Stylesheet mit der Media-Query "@media max-width:480px" angelegt und im Seitenlayout eingebunden, darin dann folgende Formatdefinition:

.float_left,
.float_right {
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}

Das mit margin-right und -left hat contao ohne mein Zutun ergänzt; ich habe im Formular nur die beiden floats definiert und text-align:center ausgewählt. Und siehe da, genau der Effekt, den ich haben wollte!

Die Seite, an der ich gerade arbeite, ist denkmalverein-Bonn-aktuell.de (wird in Kürze umbenannt und heißt dann denkmalverein-Bonn.de). Die Nennung schien mir für die Beantwortung der Frage nicht wichtig, da das Problem allgemeiner Natur ist.

Danke nochmal, Reinhard