Einschränken der Bildgröße mit max-width und max-height je nachdem, was zuerst der Fall ist

Question

Ich versuche, einen Weg zu finden, wie ich Portrait- und Landschaftsbilder einstellen kann, um die Ansichtsfenstergröße mit Max-Höhe und Max-Breite anzupassen.

Die Bilder sollten 100% Breite beibehalten, solange die Breite 1050px nicht überschreitet. Ein weiterer Hinderungsgrund ist, dass Bilder maximal 800 Pixel groß sein sollten. Also, was zuerst "wahr" ist, sollte zuerst die Größe des Bildes einschränken.

Wenn ich max-width: 1050px und max-height: 800px; setze, ist das Seitenverhältnis des Bildes durcheinander. (Wie in der Demo unten zu sehen). Es gibt auch das Problem, dass die Bildbreite breiter als das tatsächliche Bild ist (das Porträtbild mit einer Breite von 836px wird auf 1050px hochskaliert). Ist dies mit nur CSS möglich?

Demo

Answer 1

Mit etwas Hilfe von einem Freund konnte ich das lösen, aber es ist nicht 100% was ich suchte, aber für die Frage, die ich fragte, denke ich, dass es passt.

Schauen Sie sich HERE an.

Answer 2

können Sie die CSS3 verwenden viewport units dies zu erreichen, obwohl actual browser support noch etwas begrenzt ist.