Bild beschneiden
Bild beschneiden
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!
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
- Site Admin
- Beiträge: 5859
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild beschneiden
Moin,
... wie beschneiden - die arme Frau
wieso nicht einfach das Bild halb so groß?
... 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%;
}
}
Re: Bild beschneiden
Nee nee, irgendwie ....
align-items: center;
justify-content: center;
Aber was ist falsch mit der Object-Position?
Gefunden, es lag am Image Wrapperalign-items: center;
justify-content: center;
- Tommy Herrmann
- Site Admin
- Beiträge: 5859
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild beschneiden
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
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
- Site Admin
- Beiträge: 5859
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild beschneiden
... 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.
"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
- Site Admin
- Beiträge: 5859
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild beschneiden
... gucke auch mal hier:
https://www.w3schools.com/css/css3_object-fit.asp
Vielleicht passt das besser:
object-fit: scale-down;
https://www.w3schools.com/css/css3_object-fit.asp
Vielleicht passt das besser:
object-fit: scale-down;
Re: Bild beschneiden
War der Image Wrapper
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
- Tommy Herrmann
- Site Admin
- Beiträge: 5859
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Bild beschneiden
ah - ja klar
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 48 Gäste