Bilder auf dem Smartphone zu groß

[scherenschlag]

Moin.
Mein Problem ist, dass die Bilder auf dem PC eine passende Größe haben.
(Startseite. Vereinslogos und über dem Footer der Ball.)
Wenn ich die Seite dann aber auf dem Phone abrufe, erscheinen Sie mir viel zu große.
Die Relation stimmt gar nicht.
Was kann man da machen?

https://www.tsad17.de/bsv2022

[Tommy Herrmann]

Moin,

gib Deinem Logo zunächst mal eine eindeutige ID, also dann z.B. so mit einer ID, die ich hier "meinLogo" genannt habe:

id="meinLogo"

<img id="meinLogo" src="assets/images/logos-501x501.png" alt="">

Dann kannst Du eine Media-Anweisung in den Bereich "CSS Editor" des Blocks schreiben (am besten ganz unten), die z.B. so aussehen könnte. Hier wird dann ab einer Display-Breite von 767px oder kleiner (also am Handy) dann diese CSS angewendet und das Logo wird maximal 50% der Display-Breite einnehmen, passe das nach Deinen Wünschen an. Kannst auch px angeben:

Code: Alles auswählen

@media (max-width: 767px) {
  #meinLogo {
    max-width: 50%;
  }
}

Bei einer CSS-Class steht vorne ein Punkt bei einer ID (wie oben) das Raute-Zeichen #:

<img class="meinLogo" src="assets/images/logos-501x501.png" alt="">

Code: Alles auswählen

@media (max-width: 767px) {
  .meinLogo {
    max-width: 50%;
  }
}

Eine ID darf auf der gleichen Seite nur 1 x (einmalig) vorkommen, sonst wirkt das nicht. Eine Class kannst Du beliebig oft anwenden.

[scherenschlag]

Astrein Tommy. Astrein.
So sieht es hervorragend aus.
Relationen stimmen.
Danke.

[Tommy Herrmann]

prima

... die 50% beziehen sich auf die vorhandene Breite des Displays (nicht etwa auf das Logo), also auf den <div> Container.