Limitazione delle dimensioni dell'immagine con larghezza massima e altezza massima a seconda di quale è vero prima

Question

Cercando di capire come posso avere le immagini verticali e orizzontali, regolare le dimensioni del viewport con gli scenari max-height e max-width.

Le immagini devono mantenere il 100% della larghezza finché la larghezza non supera 1050 px. Un altro vincolo è che le immagini devono essere al massimo di 800px in altezza. Quindi, qualsiasi cosa sia "vera", prima dovrebbe limitare la dimensione dell'immagine.

Se si imposta max-width: 1050px e max-height: 800px;, il rapporto di formato dell'immagine è incasinato. (Come si vede nella demo qui sotto). C'è anche il problema che la larghezza dell'immagine sarà più ampia rispetto all'immagine reale (l'immagine verticale di 836 pixel di larghezza verrà ingrandita a 1050 pixel). È possibile controllare con solo CSS?

Demo

Answer 1

Con l'aiuto di un amico sono riuscito a risolvere questo problema, tuttavia non è al 100% quello che stavo cercando, ma per la domanda che ho chiesto, immagino che si adatti.

Dai un'occhiata allo HERE.

Answer 2

È possibile utilizzare il CSS3 viewport units per raggiungere questo obiettivo, anche se actual browser support è ancora un po 'limitato.