Bild beschneiden

[stobi_de]

Hallo, ich habe gerade ein Problem beim Beschneiden eines Bildes fürs Handy.
https://ayurveda-coaching.net/

Die blonde Frau soll auf Tablet nur halb so hoch werden. Also mit Media-Query den Bildcontainer beschränken.
Aber mit object-fit:cover wird der Kopf abgeschnitten und object-position: center top hat keine Wirkung.

Ich mache also mal wieder irgendwo einen blöden Fehler!

[Tommy Herrmann]

Moin,

... wie beschneiden - die arme Frau

wieso nicht einfach das Bild halb so groß?

Code: Alles auswählen

@media (max-width: 991px) {
  img, iframe {
    display: block;
    width: 50%;
  }
}

[stobi_de]

Nee nee, irgendwie ....

Aber was ist falsch mit der Object-Position?

Gefunden, es lag am Image Wrapper
align-items: center;
justify-content: center;

[Tommy Herrmann]

na ja - ich weiß ja nicht in welchem Container das Bild sitzt, dieser müsste dann natürlich ebenso angepasst werden.

Im Grunde ist das vielleicht dann dafür auch nicht der richtige Block. Das Bild kann doch ebenso gut mit "float" rechts neben dem Text sitzen und entsprechend ein "padding" erhalten, so ähnlich wie hier:


https://www.mobirise-tutorials.com/Lawy ... rticle6-48

Code: Alles auswählen

img { 
 float: right; 
 width: 50%;
 padding: 20px; 
}

[Tommy Herrmann]

... hast Du dem Bild mal oben ein "padding-top" gegeben, sodass das runter kommt?

"cover" zentriert das Bild ja immer.

... es ist ja dann auch immer die Frage was man erreichen will - meist soll das Bild ja im Ganzen erhalten bleiben und nicht nur ein Ausschnitt.

Natürlich könntest Du dann auch gleich 2 unterschiedliche Bilder anfertigen.

[Tommy Herrmann]

... gucke auch mal hier:

https://www.w3schools.com/css/css3_object-fit.asp

Vielleicht passt das besser:

object-fit: scale-down;

[stobi_de]

War der Image Wrapper

align-items: center;
justify-content: center;

[Tommy Herrmann]

ah - ja klar