CSS Bildgröße responsive anpassen

Schnipp

Lt. Commander
Registriert
Feb. 2004
Beiträge
1.138
Hallo zusammen,

ich steh mir gerade ein wenig auf dem Schlauch: ich habe in einer HTML E-Mail ein Logo mit einer Breite von 200px. Auf einem Smartphone oder ab einem Viewport von 700px soll das Logo nur mit einer Breite von 120px angezeigt werden.

Ich krieg das doch tatsächlich nicht hin. Habe es sowohl über den Inline-Style "size" des IMG-Tags probiert als auch per MediaQuery, es bleibt immer auf 200px Breite.

Wer bringt mir die Erleuchtung? Habe gerade leider den original Quellcode nicht im Zugriff, aber eben die Zeit einen Post zu erstellen ;-)

LG Schnipp
 
Also ab 700px Breite soll das Logo in 120 px angezeigt werden. Und sonst? 200px breit?
Kann man alles über CSS lösen.
 
Also, mit media query (min-width/max-width) sollte das funktioniert, dazu dann img {width: 200px} setzen. Fertig.
 
CSS:
.my-img{
width : 200px;
}
@media(max-width: 700px){
  .my-img{
    width : 120px;
  }
}

Und im HTML:
HTML:
<img class="my-img" ...></img>

Vielleicht?
 
Ok, ich habe meinen Fehler gefunden. Ich hatte im img-Tag noch einen Inline-CSS mitgegeben, den ich übersehen hatte. Wenn ich den raus nehme, dann nimmt er auch meinen MediaQuery. Danke euch für die schnelle Unterstützung!
 
  • Gefällt mir
Reaktionen: DoNG und conglom-o
Zurück
Oben