Wydaje się to trywialne, ale po wszystkich badaniach i kodowaniu nie mogę zmusić go do pracy. Warunki są następujące:
- Rozmiar okna przeglądarki jest nieznany. Dlatego prosimy nie proponować rozwiązania obejmującego bezwzględne rozmiary pikseli.
- Oryginalne wymiary obrazu są nieznane i mogą, ale nie muszą, już pasować do okna przeglądarki.
- Obraz jest wyśrodkowany w pionie i poziomie.
- Zachowaj proporcje obrazu.
- Obraz musi być wyświetlany w całości w oknie (bez przycinania).
- Nie chcę, aby pojawiły się paski przewijania (i nie powinny, jeśli obraz pasuje).
- Obraz automatycznie zmienia rozmiar, gdy zmieniają się wymiary okna, aby zająć całą dostępną przestrzeń bez przekraczania rozmiaru oryginalnego.
Zasadniczo chcę tego:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
Problem z powyższym kodem polega na tym, że nie działa: zdjęcie zajmuje całą potrzebną przestrzeń w pionie, dodając pionowy pasek przewijania.
Do mojej dyspozycji jest PHP, Javascript, JQuery, ale zabiłbym dla rozwiązania tylko CSS. Nie obchodzi mnie, czy to nie działa w IE.