Cześć.
Czy da się za pomocą samego css zmusić przeglądarkę do skalowania obrazka zależnie od rozdzielczości ekranu na szerokość i wysokość ?
Obecnie w css mam coś takiego

[HTML] pobierz, plaintext 
    img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
[HTML] pobierz, plaintext 

przy zmianie szerokości okna wszystko ładnie się skaluje, ale przy zmianie wysokości już nie. Na monitorach panoramicznych o niższej rozdzielczości takiego obrazka nie da się w całości obejrzeć - bo nie mieści się na wysokość. Trzeba przewijać. Czy da się to jakoś rozwiązać aby skalowanie odbywało zależnie od szerokości ale i od wysokości ekranu ?

[HTML] pobierz, plaintext 
img {width: 100%; height: 100%; object-fit: contain}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
img { display: table-cell; max-width: 100%; }
[HTML] pobierz, plaintext 

Oba sposoby przy zmianie szerokości okienka - wszystko działa.
Przy zmianie wysokości - obrazek się nie skaluje.
Proszę zerknąć. Spróbujcie zmniejszyć okno na wysokość.

https://jsfiddle.net/sc40od78/
https://jsfiddle.net/sc40od78/1/

Pierwszy sposób +:

[HTML] pobierz, plaintext 
html,body{
 height:100%;
}
[HTML] pobierz, plaintext 

Teraz faktycznie zaczęło to działać. Ale czy nie dało by się tego zrobić bez width: 100% ? Bo teraz każde zdjęcie rozciąga się na maksa. Co na monitorach z full hd i zdjęciu np 1200px na dłuższym boku daje bardzo słabą jakość.

max-width
Kombinuj trochę sam.