Bug in Responsive Images?
Moin,
ich habe gestern mal die neue Funktion der Responsive Images in Contao 3.4 getestet und bin
dabei auf folgendes Problem gestoßen:
Ich lasse ein Bild in unterschiedlichen Größen, gleicher Bildausschnitt von Contao generieren (also nicht art-directed).
Wenn ich das Sizes-Attribut leer lasse, werden wie erwartet meine, meine Bilder mit Skalierungsfaktor (1x, 2x) aufgezählt. Wenn ich das Sizes-Attribut ausfülle, werden, ebenfalls wie erwartet, die Bilder mit einer empfohlenen Weite ausgegeben (200w, 300w).
Allerdings kommt die im Sizes-Attribut angegebene Weite(z.B. 50vw) nicht zum Tragen. Das hängt nach ersten Versuchen damit zusammen, dass bei der Ausgabe mit empfohlenen Weiten keine width="" und height="" zugewiesen werden dürften, siehe auch Spezifikation bei whatwg.
Da das Thema noch sehr neu ist, könnte es natürlich auch sein, dass ich vergessen habe ein Feld auszufüllen o.ä. Den Haken im Seitenlayout für die Verwendung des respimage.js habe ich aber gesetzt. Der Fehler tritt sowohl im aktivierten Zustand als auch im dekaktivierten Zustand unter Safari und Chrome auf.
Kann jemand den Fehler nachvollziehen?
Grüße,
Dennis
Liste der Anhänge anzeigen (Anzahl: 1)
Ich setze irrtumlich zu viel vorraus, sorry. Ich gelobe Besserung.
Ich habe eine Bildgröße angelegt. Dort setze ich Breite von 480px und Höhe 320px. Unabhängig ob ich jetzt weitere "Bildgrößen-Media-Query"-Sources anlege, wird die Bildgröße des Fallbackimage nicht runtergerechnet.
Siehe Bild:Anhang 18070
Source-Reihenfolge beachten
In deinem HTML-Code sind die <source>-Elemente in der falschen Reihenfolge angeordnet, denn der Browser geht diese Liste von oben nach unten durch und nimmt den ersten Eintrag mit passendem Media-Query. In deinem Fall werden also die Media Queries (max-width:768px) und (max-width:544px) immer ignoriert da das erste <source>-Element mit (max-width:992px) vorher greift.