Убедитесь, что HTML iframe не стал выше квадратного

Question

У меня есть iframe, который я хочу, чтобы он был настолько широким, насколько требуется для дисплея. У меня это внутри section, а в файле sass есть следующее:

iframe
    max-width: 100%

где реальная ширина, в противном случае контролируется section. Теперь, на очень узких дисплеях, таких как смартфон, это работает отлично. Тем не менее, высота iframe сходит с ума в этом случае. Есть ли способ гарантировать, что высота объекта не может стать больше, чем его ширина? То есть есть ли способ получить доступ к ширине 100%? Я хотел бы сделать что-то вроде этого

iframe
    max-width: 100%
    max-height: max-width

Изменить:

Пожалуйста, посмотрите здесь рабочий пример:

http://jsfiddle.net/ptzyjmb1/5/

Обратите внимание, что первый внедренный объект шире, чем квадрат. Второе о квадрате. и последний выше, чем квадрат. Я просто хочу, чтобы какой-то параметр для max-height приводил к тому, что третий объект («высокое» видео) будет квадратным. То есть я хочу иметь возможность устанавливать ширину в соответствии с тем, что мне (или дисплеем), и высота не будет превышать это значение.

Я не хочу применять это height = width, просто это height <= width

Answer 1

Используйте атрибуты vh и vw (view-height и view-width):

iframe {
    max-width: 100vw;
    max-height: 100vw;
}

Если, как указал @Anonymous, iframe является дочерним элементом некоторого родительского элемента, ширина которого не равна 100vw, вы можете просто использовать ширину div в качестве ширины iframe:

div {
    width: 50%
}
div iframe {
    max-width: 50vw;
    max-height: 50vw;        

Если ширина родительского div постоянно меняется, возможно, используется JS. Если ширина родительского элемента представлена ​​в переменной, как и должно быть, то JQuery может решить проблему следующим образом:

setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)