Responsive Bildverkleinerung?

Fragen und Diskussionen rund um Internet, Software und PC
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Responsive Bildverkleinerung?

Ungelesener Beitrag von 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung?

Ungelesener Beitrag von 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 am Desktop.jpg


Bild positioniert am Smartphone - wird nur links abgeschnitten:

Bild positioniert am Smartphone.jpg
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Re: Responsive Bildverkleinerung?

Ungelesener Beitrag von 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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung?

Ungelesener Beitrag von 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
Benutzeravatar
Andyneu
Moderator
Moderator
Beiträge: 67
Registriert: Mi 9. Dez 2020, 16:40
Wohnort: Hoope
Kontaktdaten:

Re: Responsive Bildverkleinerung?

Ungelesener Beitrag von Andyneu »

Eventuell muss noch das !important mit rein.
Gruß Andy
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung?

Ungelesener Beitrag von Tommy Herrmann »

nee - so was hat Bootstrap nicht im Programm und Mobirise erst recht nicht :D
stobi_de
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Responsive Bildverkleinerung

Ungelesener Beitrag von 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?
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von 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
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von 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.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von 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
Moderator
Moderator
Beiträge: 758
Registriert: Di 11. Okt 2022, 06:30

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von stobi_de »

"Scale down" scheint unbekannt.

Aber gefunden
object-position: top;
Benutzeravatar
Andyneu
Moderator
Moderator
Beiträge: 67
Registriert: Mi 9. Dez 2020, 16:40
Wohnort: Hoope
Kontaktdaten:

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von Andyneu »

Hallo
Was du suchst dürfte dies sein.

Code: Alles auswählen

object-fit: cover;
 object-position: 50% 0;
Gruß Andy
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5820
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Responsive Bildverkleinerung

Ungelesener Beitrag von Tommy Herrmann »

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.
Antworten

Wer ist online?

Mitglieder in diesem Forum: Majestic-12 [Bot] und 1 Gast