Responsive Bildverkleinerung?
Responsive Bildverkleinerung?
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
Frank
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung?
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:
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:
Re: Responsive Bildverkleinerung?
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.
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
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung?
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung?
nee - so was hat Bootstrap nicht im Programm und Mobirise erst recht nicht 

Responsive Bildverkleinerung
.: EDIT Tommy - Themen zusammengeführt
:.
Du hattest mal rausgefunden, wie nur oben oder unten was von einem Bild abgeschnitten wurde.
Wo war denn das?
Du hattest mal rausgefunden, wie nur oben oder unten was von einem Bild abgeschnitten wurde.
Wo war denn das?
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung
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%;
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%;
Re: Responsive Bildverkleinerung
Code: Alles auswählen
img {
border-radius: 7px;
position: relative;
height: 450px;
object-fit: cover;
pointer-events: visible;
@media (max-width: 992px) {
height: 340px;
}
Ich würde gerne den Kopf erhalten, also nur unten abschneiden.
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung
mach mal noch das hinzu:
... und warum gibst Du die Höhe nicht einfach mit 100% an:
... nichts getestet.
Code: Alles auswählen
@media (max-width: 992px) {
height: 340px;
object-fit: scale-down;
}
Code: Alles auswählen
@media (max-width: 992px) {
height: 100%;
}
Re: Responsive Bildverkleinerung
"Scale down" scheint unbekannt.
Aber gefunden
object-position: top;
Aber gefunden
object-position: top;
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
- Andyneu
- Mitglied (Level 7)
- Beiträge: 67
- Registriert: Mi 9. Dez 2020, 16:40
- Wohnort: Hoope
- Kontaktdaten:
Re: Responsive Bildverkleinerung
Hallo
Was du suchst dürfte dies sein.
Was du suchst dürfte dies sein.
Code: Alles auswählen
object-fit: cover;
object-position: 50% 0;
Gruß Andy
- Tommy Herrmann
- Site Admin
- Beiträge: 6692
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Responsive Bildverkleinerung
Moin,
die Eigenschaft "object-position" hatte ich doch bereits in diesem Beitrag beschrieben:
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.
die Eigenschaft "object-position" hatte ich doch bereits in diesem Beitrag beschrieben:
… und auch hier: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
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.
Das war wohl auch das, was Frank am Anfang meinte und nicht finden konnte.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?
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 1 Gast