Убедитесь, что элемент сохраняет заданное соотношение сторон

Question

Есть ли способ указать соотношение сторон в CSS, например 4: 3 или 16: 9, а затем, чтобы блок div (контейнер) соответствовал текущей ширине и высоте окна?

Довольно простой вопрос, надеюсь, он имеет относительно простой ответ.

Edit: тех, кто еще заинтересован отличным примером достижения этой цели, используя только стили бы responsive helpers классы Bootstrap в.

Answer 1

Для этого я боюсь, что вам понадобится JS. Я использовал JQuery здесь:

function preserveAspect() { 
    var scaled = $("#scaled"); 
    scaled.height("100%"); 
    scaled.width("100%"); 
    scaled.css("box-sizing", "border-box"); 
    var ratio = 16/9; 
    var w = scaled.outerWidth(); 
    var h = scaled.outerHeight(); 

    if (w > ratio*h) { 
    scaled.width(ratio*h); 
    // horizontal centering is done using margin:auto in CSS 
    } else if (h > w/ratio) { 
    var newHeight = w/ratio; 
    scaled.height(newHeight); 
    // for vertical centering: 
    scaled.css({marginTop: ($("body").height()-newHeight)/2}); 
    } 

} 
$(document).ready(function() { 
    preserveAspect(); 
    $(window).resize(preserveAspect); 
}); 

Объяснение:

1. Сначала масштаб наших дел до 100% по ширине и высоту, так что мы знаем, сколько места есть.
2. Затем мы смотрим вверх, если он слишком широкий, что означает, что ширина больше , чем отношение высоты.
   • Если да, измените ширину. Высота уже на 100%.
   • В противном случае он может быть слишком высоким, и в этом случае мы хотим, чтобы шкала была разделена на ширину. Чтобы центрировать по вертикали, мы используем margin-top set to (window_height - element_height)/2.
3. Если ни одно из обоих правил не применяется, div также масштабируется должным образом.
4. В конце мы добавляем прослушиватели событий, когда документ полностью загружен и всякий раз, когда изменяется размер окна.

Полный код и рабочий пример здесь: http://jsbin.com/efaRuXE/5/

Answer 2

Обнаружен способ. Это может быть грубо, но это должно заставить вас идти. Установите высоту элемента равным нулю, а затем используйте процент для заполнения.

jsFiddle example

Например, 4: 3:

div { 
    height: 0; 
    padding-bottom: 75%; 
    background: #999; 
} 

Например, 16: 9

div { 
    height: 0; 
    padding-bottom: 56%; 
    background: #999; 
} 

Answer 3

К сожалению, нет.

Я предложил однажды на WWW-стилях РГ @ W3C строительство, как это:

div { 
    width: 50%; 
    height: width(56.25%); /* 16:9 ratio */ 
} 

, но не один из разработчиков браузеров не выразил никакого интереса в тот момент.

И в любом случае это решение выше позволяет определить отношение только к коробкам. Но макетная модель, используемая CSS, не позволяет описать вложение декларативно.

Answer 4

Этот вопрос вот несколько недель теперь, но это чистый CSS путь для достижения этой цели. Спасибо Danield за использование его, чтобы ответить this question. Он использует оч.сл. и Vh единиц, например:

#wrapper { 
    height:75vw; 
    max-height:100vh; /* max-height/height = aspect ratio */ 
    width:100vw; 
    max-width:133.3333vh; /* max-width/width = aspect ratio */ 
    position:absolute; 
} 

Плохая новость заключается в том, что support is iffy in current mobile browsers and in IE before version 11.