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

Question

Возможно, это не простой вопрос, но я стараюсь изо всех сил.

У меня есть пример этого сайта: http://lotvonen.tumblr.com/ У меня есть небольшой кусочек javascript, который автоматически вычисляет высоту внутреннего окна браузера и устанавливает это число как высоту div обертки изображений. Высота изображения внутри обертки составляет 100% от обертки, поэтому я получаю красивые полноэкранные изображения на всех экранах нормального размера. Это прекрасно работает на экранах, которые шире, чем высокие (настольные компьютеры, ноутбуки и т. Д.).

Но!

С экранами, которые больше, чем широко (смартфоны, iPad и т. Д.), Изображения обрезаются с боков. Я не хочу этого, поэтому у меня есть временное решение, чтобы медиа-запрос назначал высоту автоматически и ширину 100%, когда максимальная ширина экрана браузера равна 1024, так что отсечение не происходит. Но это не очень хорошее решение, которое ломается при определенных разрешениях. Это также уничтожает мой JS с более низким разрешением (например, 800x600).

Вот JS:

<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;

for (var i = 0; i < size; i++) {

var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>

и вот мой CSS:

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

@media only screen and (max-width: 1024px) {

.img {
    height:auto !important;
}
.img img {
    height:auto !important;
    max-width:100%;
}

и вот div:

<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>

Как сделать так, чтобы, когда окно браузера было больше, чем широко (например, 720x1024), изображения корректировались по ширине, а когда окно браузера шире, чем высота (например, 1024x720), изображения корректировались как они делают сейчас (по высоте, с JS). Это вообще возможно? Есть ли простое исправление CSS или мне нужно больше связываться с JS?

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

Answer 1

Вы также можете получать аспект в javascript на регулярной основе, а затем добавить класс к объекту body, который бы указывал, был ли он 4: 3, широкоэкранный или портретный.Затем заставьте его работать с интервалом в случае изменения размера окна.

Пример

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);

Answer 2

Я бы предложил сначала получить соотношение сторон в javascript.Используйте window.innerHeight и windows.innerWidth и сделайте необходимое деление.Затем сделайте это условием.Когда экран шире его высоты, установите для изображения в css значение width: 100%.В противном случае установите height: 100%.