Seite 1 von 1
Bilder auf dem Smartphone zu groß
Verfasst: Do 9. Dez 2021, 15:49
von 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
Re: Bilder auf dem Smartphone zu groß
Verfasst: Do 9. Dez 2021, 16:07
von 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.
Re: Bilder auf dem Smartphone zu groß
Verfasst: Do 9. Dez 2021, 16:31
von scherenschlag
Astrein Tommy. Astrein.
So sieht es hervorragend aus.
Relationen stimmen.
Danke.
Re: Bilder auf dem Smartphone zu groß
Verfasst: Do 9. Dez 2021, 17:05
von Tommy Herrmann
prima
... die 50% beziehen sich auf die vorhandene Breite des Displays (nicht etwa auf das Logo), also auf den <div> Container.