In dem Beispiel sieht man das Bild zuerst komplett dargestellt, dann in einem Element (hier ein div) mit überlangem Inhalt (vertikalem Scrollbalken).
http://funbox.i24.cc/test.html
Wie zu sehen ist wird das Bild rechts abgeschnitten und es erscheint, je nach Browser, ein horizontaler Scrollbalken.
- An einem Touchscreen (iPad) taucht das Problem nicht auf da dort keine Scrollbalken dargestellt werden
- Chrome und Thunderbird schneden das Bild in der Breite des Scrollbalkens ab
- Firefox und Microsoft Edge zeigen das ganze Bild, allerdings mit horizontalem Scrollbalken
Was ich möchte ist, dass das Bild (in Beispiel 2) von der Breite so in das Fenster passt das es weder abgeschnitten wird noch ein horizontaler Scrollbalken erscheint und das Fenster nicht breiter wird.
Sitestep
------------
Das ganze läuft bei mir in einer Landkarte (Leaflet Maps Marker), dort ist ein Marker gesetzt der, je nach Broswerfenstergröße zwischen 250 und 500 px groß ist. Das Bild wird per width:auto an die jeweilige Fenstergröße angepasst. Setze ich auto:100% wird das Bild auf die min-width Breite gesetzt