Görüntü boyutunu, hangisinin doğru olduğuna bağlı olarak maksimum genişlik ve maksimum yükseklik ile sınırlama

Question

Dikey ve yatay görüntülerin olabileceği bir konumu, maksimum yükseklik ve maksimum genişlikli senaryolarla görüntüleme boyutuna göre ayarlamaya çalışıyorum.

Resimler, genişlik 1050 piksel'i geçmediği sürece% 100 genişlikte tutulmalıdır. Başka bir kısıtlayıcı, resimlerin en fazla 800 piksel olması gerektiğidir. Yani hangisi "doğru" ise, ilk önce resmin boyutunu kısıtlamalıdır.

max-width: 1050px ve max-height: 800px; ayarlarsanız, görüntünün en boy oranı bozulur. (Aşağıdaki demoda görüldüğü gibi). Ayrıca, görüntü genişliğinin gerçek görüntüden daha geniş olacağı problemi var (836px genişliğinin dikey resmi 1050 piksele yükseltilecektir). Sadece CSS ile kontrol etmek mümkün mü?

Demo

Answer 1

Bir arkadaşımdan yardım alarak bunu çözebildim, ancak aradığım şey% 100 değildi, ama sorduğum soru için, sanırım uyuyor.

HERE'a bakın.

Answer 2

Sen actual browser support hala biraz sınırlı olsa da, bunu başarmak için CSS3 viewport units kullanabilir.