Ograniczanie rozmiaru obrazu z maksymalną szerokością i wysokością maksymalną w zależności od tego, która prawda jest pierwsza.

Question

Próba znalezienia sposobu, w jaki mogę mieć obrazy pionowe i poziome, dopasować do rozmiaru obszaru roboczego ze scenariuszami maksymalnej wysokości i maksymalnej szerokości.

Obrazy powinny zachować szerokość 100%, o ile szerokość nie przekracza 1050 pikseli. Innym ograniczeniem jest to, że obrazy powinny mieć najwyżej 800 pikseli. Więc to, co jest "prawdziwe", powinno najpierw ograniczyć rozmiar obrazu.

Jeśli ustawię max-width: 1050px i max-height: 800px;, współczynnik proporcji obrazu zostanie pomniejszony. (Jak widać w poniższym demo). Występuje również problem polegający na tym, że szerokość obrazu będzie szersza niż rzeczywisty obraz (obraz portretowy o szerokości 836 pikseli zwiększy się do 1050 pikseli). Czy można to kontrolować za pomocą samego CSS?

Demo

Answer 1

Z pomocą przyjaciela udało mi się to rozwiązać, ale nie jest to w 100% to, czego szukałem, ale na pytanie, które zadałem, myślę, że pasuje.

Spójrz na HERE.

Answer 2

może korzystać z CSS3 viewport units aby to osiągnąć, choć actual browser support nadal jest nieco ograniczone.