Hallo zusammen,
Wenn ich mehrere Fotos nebeneinander einstellen möchte empfiehlt sich ja eine Prozentangabe damit diese bei unterschiedlichen Auflösungen jeweils gleich dargestellt werden. (Handy, Tablett, PC ) Soweit alles klar.
Wie aber stelle ich ein einzelnes Bild ein das nicht die volle Breite nutzt und das ich mittig platzieren möchte?
Wenn ich den Horizontal-Abstand festlegen will kann ich leider keine Prozentangaben machen. Ich muss also zwingend einen festen Wert einstellen. Dadurch sieht es dann zwar auf dem PC mittig aus, bei Betrachtung der Seite im Handy aber ist genau dieses Bild dann außermittig versetzt.
Gibt es hierfür eine Lösung?
Hi Jörg,
ich kenne leider auch keine Lösung, außer das Bild in voller Größe mit 97% anzuzeigen (dann ist es etwa gleich breit wie zwei nebeneinander, die du mit je 48% und zwei blanks einstellst).
Liebe Grüße
Elli
Scout Womo-Abenteuer.de
Liebe Grüße,
Ulli
Scout Womo-Abenteuer.de
www.dezembercamper.de
Hi Jörg,
hab es gerade ausprobiert, funktioniert mit dem div-Befehl. Dafür musst du auf Quelltext umstellen und folgenden html-Befehl eingeben:
vor das Bild
Und hinter das Bild
Liebe Grüße,
Ulli
Scout Womo-Abenteuer.de
www.dezembercamper.de
Hi Ulli,
ok, Profi am Werk. Werde ich mir merken?. Danke.
Liebe Grüße
Elli
Scout Womo-Abenteuer.de
Ulli du bist spitze!
Vielen Dank für den Tipp
Viele Grüße, Jörg
Impressionen aus Nordamerika
gern
ach Elli, von Profi bin ich weit entfernt
Liebe Grüße,
Ulli
Scout Womo-Abenteuer.de
www.dezembercamper.de
Hi,
<div align="center">...</div> geht zwar aktuell noch, aber das "align" attribut in Elementen ist schon eine weile als "obsolet" gekennzeichnet. Das funktioniert zur Zeit noch soweit in den meisten/allen Browsern, aber das wird sich in endlicher Zeit ändern.
Der korrekte weg wäre es über die CSS Styles zu machen, das geht auch direkt in HTML ohne extra CSS/Style-File und man muss es nicht in ein <div> element packen, das geht auch direkt in <img>
<img src="xxx" style="display: block; margin-left: auto; margin-right: auto;"/>
Der Editor im Forum ist aber aktuell der Meinung er musse ein <img> Tag immer in einen Absatz (<p>..</p>) packen. Fehlt das <p> tag fügt er es selbst hinzu. Das sorgt unten im zweiten Bild für einen leichten versatz des Bildes durch die CSS Styles der Forums-Posts ;-(
Beispiel: (1. Bild im <div>, 2. Bild nur <img>, 3. Bild nur <img> aber auf 50px Breite skaliert)
vg
-Torsten
Scout Womo-Abenteuer.de
Hallo Thorsten,
ich hab deine Info gleich mal ausprobiert, sehe da aber ein Problem. im PC sieht alles gut aus: Das untere Bild ist mittig , im Handy (Android 6) sieht das Bild aber aus als würde es die gesamte Breite einnehmen.
Was mach ich da falsch?
Edit: das gilt auch für dein eingestelltes Beispiel.
Viele Grüße, Jörg
Impressionen aus Nordamerika
Hi Jörg,
die Inline-Styles sind schon in Ordnung. Auf dem Telefon ist (zumindest hochkant) das Display zu schmal für das Bild. Dreh das Handy mal um 90 Grad und schau nochmal..
LG
Steffen
Hallo Jörg,
mangels Android kann ich das nicht testen, aber es würde mich sehr wundern wenn das nicht geht. Ich weiss nicht wie stark sich die Web-Render Engines von Chrome auf dem Desktop zur Mobil-Version unterscheiden, aber margin-left/right ist CSS 2.1 und so alt das es sogar bon Internet Explorer 6 unterstützt wurde...
Wie Steffen schon angemerkt hat könnte die Größe des Bildes auf dem kleinen Bildschirm deines Telefons zu breit sein. Ich hab in meinem Beispiel oben mal ein 3. Bild eingefügt und es per style auf 50px Breite skaliert. Wie schaut das bei dir aus?
vg
-Torsten
Scout Womo-Abenteuer.de