Responsive Bildverkleinerung?

[stobi_de]

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

[Tommy Herrmann]

Moin,

probiere es mal so:

Code: Alles auswählen

img {
  width: 100%;
}
@media (max-width: 767px) {
  img {
    height: 300px;
    object-fit: cover;
    object-position: 100% 0;
  }
}

Beispiel:

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


Bild am Desktop:

Bild positioniert am Smartphone - wird nur links abgeschnitten:

[stobi_de]

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.

[Tommy Herrmann]

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

[Andyneu]

Eventuell muss noch das !important mit rein.

[Tommy Herrmann]

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

[stobi_de]

.: EDIT Tommy - Themen zusammengeführt :.

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

[Tommy Herrmann]

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%;

[stobi_de]

Code: Alles auswählen

img {      
      border-radius: 7px;
      position: relative;
      height: 450px;
      object-fit: cover;
      pointer-events: visible;
      @media (max-width: 992px) {
        height: 340px;
      }

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.

[Tommy Herrmann]

mach mal noch das hinzu:

Code: Alles auswählen

@media (max-width: 992px) {
  height: 340px;
  object-fit: scale-down;
}

... und warum gibst Du die Höhe nicht einfach mit 100% an:

Code: Alles auswählen

@media (max-width: 992px) {
  height: 100%;
}

... nichts getestet.

[stobi_de]

"Scale down" scheint unbekannt.

Aber gefunden
object-position: top;

[Tommy Herrmann]

… das gibt es aber schon:

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

[Andyneu]

Hallo
Was du suchst dürfte dies sein.

Code: Alles auswählen

object-fit: cover;
 object-position: 50% 0;

[Tommy Herrmann]

Moin,

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

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.

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.