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

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

У меня есть пример сайта: 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%;
}

а вот див:

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

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

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


javascript resize aspect-ratio fluid-images fluid-layout
person hlotvonen    schedule 23.01.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы также можете регулярно получать аспект в 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);
person pseudosavant    schedule 24.01.2012

arrow_upward
1
arrow_downward

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

person Lg102    schedule 23.01.2012