Responsive img srcset nicht skalieren im Querformat

Question

Ich habe vor kurzem die folgenden website gebaut. Die Website verwendet img srcset für alle Bilder.

Während des Debugging habe ich entdeckt, dass beim Umschalten zwischen Hoch- und Querformat auf der Startseite das obere Bild mit voller Breite das Bildfenster nicht so füllt, wie es sollte. Wenn Sie die Seite im Querformat aktualisieren, wird die korrekte Skalierung angezeigt.

Ich bin mit dem folgenden CSS auf meine Bilder ansprechbar zu machen:

img { 
    height: auto; 
    max-width: 100%; 
} 

Es ist wichtig zu beachten, dass ich zwei Bilder für diese haben. Ein quadratisches Bild wird angezeigt, wenn das Ansichtsfenster 600 Pixel oder weniger beträgt. Alles über 600px und das Bild mit voller Breite wird angezeigt. Dies wird in der CSS mit display: block; und display: none; gesteuert.

Ich kann das Problem nicht über Browserstack emulieren, aber kann auf einem physischen Gerät (iPhone 6) in Safari und Chrome.

Würde es helfen, wenn meine img-Tags eine Breite und Höhe hätten?

Answer 1

Warum verwenden Sie nicht min-width?

Das Problem beginnt mit der Tatsache, dass Sie nicht definiert, was die Breite des Elements, sondern definieren, was sein max-width. In diesem Fall basiert Ihr Bild auf dem Original auf ihrer Breite. fügen Sie einfach min-width: 100%;

img { 
    height: auto; 
    min-width: 100%; 
    max-width: 100%; 
}