Изменение размера изображения до размера окна или отсутствие переполнения по высоте или ширине

Question

Я понимаю, что этот вопрос задавался несколько раз в разных словах и вариантах, но мне еще нужно найти что-то, что работает для меня.

Я пытаюсь, чтобы img заполнил большую часть экрана (сохраняя его соотношение сторон), не переполняя края. (В основном, браузер браузера Firefox делает это при просмотре изображения)

Большинство, что я пробовал, работает только в одном направлении, т.е. ширина будет изменяться, но в конечном итоге будет превышать высоту и то же самое для другого, либо с помощью CSS, либо с помощью JScript. Также, играя в мою проблему, я хочу, чтобы я сделал это как для портретных, так и для пейзажных изображений. (Более или менее любое изображение, которое у меня есть на сайте)

Кажется, что он должен работать с использованием чистого CSS, но не (im not полностью осведомленным во всех CSS, хотя):

Link to JSFiddle

body, html { 
    margin:auto; 
    padding:6px; 
    height:100%; 
    width:100%; 

} 
img { 
    max-width:100%; 
    max-height:100%; 
} 

Есть рука полно других сценариев, а также, но этот пост становится немного долго.

Может кто-нибудь помочь мне, содержащий мои изображения в пределах экрана, либо с JQuery или CSS (в пределах или без DIV)

Заранее спасибо,

Answer 1

---

МОЙ ОТВЕТ:

Я в конечном итоге просто обернув изображение в DIV и установив размеры Div в CSS:

PURE CSS Resize

К сожалению, этот метод может выглядеть довольно ужасно в старых браузерах, но он имеет по крайней мере вытащил меня из рассола и его крошечного куска стилизации.

Надеюсь, в ближайшее время я смогу найти альтернативу jQuery.

body, html { 
    width:98%; 
    height:98%; 
} 
.outer { 
    position:fixed !important; 
    position:absolute; 
    margin:auto; 
    text-align:center; 
    top:10px; 
    right:0; 
    bottom:10px; 
    left:0; 
} 
img { 
max-width:100%; 
max-height:100%;  
padding:4px; 
background-color:#fff; 
} 

---- 
<div class="outer"> 
<img src="whatever.jpg" /> 
</div> 

Answer 2

Теперь определите html, body height 100%;

, как как это

body, html { 
    height:100%; 
} 

Answer 3

Попробуйте JQuery плагин: TailorFit и проверить demo.

Вы можете поиграть с различными опциями в демо, чтобы выяснить, может ли это сработать для вас. Поддержка браузера является экстремальной, поскольку она использует только jQuery и относительное позиционирование.

Полное раскрытие информации - я являюсь автором плагина.