Hallo Gemeinde;-)
Ist das ein Bug, gehört das so oder kapiere ich das Thema Bildgrößen noch immer nicht?
Ich habe in Contao 3.5.4 verschiedene Bildgrößen definiert, so dass ein Redakteur z.B. ein Bild mit 40% Contentbreite auswählen kann. Das Bild sollte also bei z.B. breit aufgezogenem Browser 40% Breite haben. Wenn ich die Breite des Browsers verkleinere soll sich das Bild natürlich auch von der Beite anpassen, also eben 40% der Contentbreite.
Dazu habe ich in den Einstellungen der Bildgröße (beim Werkzeugsymbol) das hier eingegeben:
Breite: 480
Höhe: 480
Größenänderungsmodus: Proportional
Zoom: 0
Sizes-Attribut: (max-width: 400px) 100vw, (max-width: 1300px) 37vw, 480px
Pixeldichte: 0.5x, 1x, 2x
Anhang 16873
respimages.min.js ist eingebunden.
Das funktioniert in Firefox, Chrome, Opera super:
- Das Bild hat eine maximale Breite von 480px wenn der Browser ganz breit aufgezogen wird.
- Das Bild verkleinert sich brav beim Zusammenschieben des Browsers im Bereich zwischen 1300 bis 401px und wird in 37vw angezeigt.
- Ab 400px und drunter wird es dann in voller Breite dargestellt.
Dieser Code wird erzeugt:
HTML-Code:
<img src="assets/images/7/meinbild-c581a167.jpg" srcset="assets/images/7/meinbild-c581a167.jpg 480w, assets/images/b/meinbild-6231e69b.jpg 240w, assets/images/f/meinbild-c6fd7a1f.jpg 960w" sizes="(max-width: 400px) 100vw, (max-width: 1300px) 37vw, 480px" alt="" title="test">
Nur Safari zickt rum (Win & Mac). Ich dachte, ab Safari 8 wird das srcset unterstützt?
Das Verhalten bei Safari ist Folgendes:
Das Bild wird in 480px Breite ausgegeben. Verkleinert man den Browser, bleibt es einfach mal bei 480px Breite - also kein prozentuales Verhalten. Unter ca. 566px Browserbreite wird das Bild pauschal in 240px Breite dargestellt (also die 0.5x Variante) - wieder kein prozentuales Verhalten bei weiterer Verkleinerung. Unter 400px Browserbreite wird das Bild in 480px ausgegeben. Was geht da ab?
Muss ich für Safari mit CSS nachhelfen? Wie sollte das gehen, ich kann ja leider einer Bildgröße keine Klasse zuteilen. Oder gibt's dafür eine Möglichkeit?
Sind meine Einstellungen, um das gewünschte Verhalten zu erreichen, schlicht und einfach falsch? FF und seine feinen Kumpels spielen da mit, warum will Safari nicht mitspielen?
Lesezeichen