Frage zum Wiki-Artikel Responsive Bilder / resolution switching

[curtis]

Hallo zusammen,

da seit den letzten beiden Updates von Firefox meine Website auf Mobilgeräten nur noch ganz winzig dargestellt wird, bin ich seitdem auf der Fehlersuche.

Inzwischen habe ich festgestellt, dass der Browser das Logo des Seiten-Headers, das 1050 px breit ist, auf dem Smartphone ebenfalls in voller Breite darstellt; dadurch wird der Rest natürlich kleiner, und ich nehme an, dass genau das die Ursache ist. Also hoffte ich, durch Resolution Switching (mit srcset) den Fehler beheben zu können, indem ich einfach mehrere Größen des Logos anbiete.

<img src="logoneu1-1050.png"
     alt="Header-Logo"
     srcset="logoneu1-1050.png 1050w, 
	           logoneu1-850.png 850w, 
              logoneu1-600.png 600w, 
              logoneu1-500.png 500w, >
 	           logoneu1-400.png 400w" >

...Das Ganze funzt jedoch nicht, d. h. auf dem Desktop wurde daraufhin die größte Größe (1050 px) übergroß, sprich viel zu groß und dadurch verzerrt, dargestellt (über die volle Bildschirmbreite von 1920 px, während die Seite selbst nicht die volle Bildschirmbreite, sondern nur zentrierte 1100 px einnimmt).

Ohne srcset wird das Logo wieder ganz normal dargestellt...

Erst dachte ich, dass das mit der style.css kollidiert, doch dort ist als maximle Breite tatsächlich 1100 px für die Seite angegeben, insofern dürfte das Logo bei Anwendung von scrset nicht so stark verzerrt werden.

Hat jemand vielleicht eine Idee, woran das liegen könnte, bzw. wo ich den Fehler suchen könnte?

Vielen Dank schon mal!