Mobirise-Tutorials.com

Ich habe ein Vordergrund Bild mit fixer Höhe. Also wird es auf dem Handy links und rechts gleich abgeschnitten. Ich finde keinen CSS Befehl, mit dem ich nur links abschneiden kann, weil sich das Hauptmotiv auf der rechten Seite befindet
Frank

Moin,

probiere es mal so:

Beispiel:

https://www.mobirise-tutorials.com/Test ... d-Position


Bild am Desktop:



Bild positioniert am Smartphone - wird nur links abgeschnitten:

Irgendwie klappt das nicht so, wie ich mir das vorgestellt habe.
Der Kunde drängt irgendwie ein wenig, daher habe ich nun 2 verschiedene Bilder drin für Handy und PC
ich werde Deine Lösung nochmal in Ruhe antesten.
www.afripix.de/comfortherm (nach 1,5 Jahren pause gehts schon weiter)

Entschuldige, wenn ich das dann hier nicht nutze.

Moin,

ich weiß ja nicht wie Dein Bild aussieht - aber diese CSS-Positionierung ist eigentlich genau dazu gedacht.

object-position: 100% 0;

Der erste Wert (100%) lässt das Bild am rechten Rand beginnen, da kann jede Prozentzahl oder auch Pixelzahl stehen, also auch z.B. 97% - so kann man das Bild rücken wie man will. Wäre der erste Wert 0% wäre es umgekehrt, also ab linker Bildkante.

Der zweite Wert (hier 0) ist 0% von oben, das Bild wird ab der oberen Kante angezeigt, bei 100% wäre es umgekehrt (von unten) - dann würde das Bild ab der unteren Kante dargestellt.

Da das Bild auf "cover" (bedeckt) steht, muss die Höhe des Bildes, bei der Angabe von 100% Breite, am Handy natürlich entsprechend optimiert gewählt werden. Man kann auch die Breite am Handy noch anpassen oder beides. Bei (hier) 300px Höhe ist der Inhalt dann natürlich kleiner als wenn ich eine Höhe von z.B. 400px angeben würde. Dann wäre der Kopf am Handy schon so groß, dass dieser wahrscheinlich nicht im Ganzen angezeigt würde.

Du kannst damit also ein Bild für jede Media-Größe exakt positionieren.

Das ist doch eigentlich genau das was Du erreichen wolltest, denn ansonsten stellt "cover" ein Bild immer mittig auf dem vorhandenen Raum dar.

Hier kannst Du das auch mal testen. Man kann am Button "Try it Yourself" (Versuche es selbst) in dem sich öffnenden Fenster die Werte ändern und dann die geänderte Werte am Button "Run >" ausführen:

https://www.w3schools.com/cssref/css3_p ... sition.php

Eventuell muss noch das !important mit rein.

nee - so was hat Bootstrap nicht im Programm und Mobirise erst recht nicht

.: EDIT Tommy - Themen zusammengeführt :.

Du hattest mal rausgefunden, wie nur oben oder unten was von einem Bild abgeschnitten wurde.
Wo war denn das?

Weiß gerade nicht genau, was Du meinen könntest.

Mobirise legt ja viele Bilder für das Handy mit "cover" an, sodass das Bild mittig dargestellt wird aber dennoch den gesamten Bildschirm ausfüllt. Das muss ja auch so sein, damit das Bild nicht verzerrt wird.

Andererseits könnte man ein Bild adaptiv verkleinern, somit wird es immer komplett dargestellt, also z.B. mit:

width: 100%;

Wenn man das so macht, wird das Bild irgendwann irgendwo abgeschnitten (oben die beiden Personen bei www.afripix.de/eiweiss).
Ich würde gerne den Kopf erhalten, also nur unten abschneiden.

mach mal noch das hinzu:
... und warum gibst Du die Höhe nicht einfach mit 100% an:
... nichts getestet.

"Scale down" scheint unbekannt.

Aber gefunden
object-position: top;

… das gibt es aber schon:

https://www.w3schools.com/css/tryit.asp ... scale-down

Hallo
Was du suchst dürfte dies sein.

Moin,

die Eigenschaft "object-position" hatte ich doch bereits in diesem Beitrag beschrieben:

stobi_de hat geschrieben: ↑Fr 22. Dez 2023, 10:13 Ich habe ein Vordergrund Bild mit fixer Höhe. Also wird es auf dem Handy links und rechts gleich abgeschnitten. Ich finde keinen CSS Befehl, mit dem ich nur links abschneiden kann, weil sich das Hauptmotiv auf der rechten Seite befindet
Frank

… und auch hier:

https://www.mobirise-tutorials.com/Test ... d-Position

… es gibt meist verschiedene Wege zum Ziel.

Als Position kann man eben auch "top" oder auch "bottom" angeben.



Ich habe die Beiträge dieser beiden gleichen Themen jetzt mal zusammengeführt.

stobi_de hat geschrieben: ↑Di 20. Feb 2024, 13:36 Du hattest mal rausgefunden, wie nur oben oder unten was von einem Bild abgeschnitten wurde.
Wo war denn das?

Das war wohl auch das, was Frank am Anfang meinte und nicht finden konnte.