Ширина зависит от высоты

Question

Можете ли вы показать мне заполненный HTML-код, где в нем есть какой-то прямоугольник с "height = 75% моего экрана" и "widtht = 4/3 от высоты". Таким образом, должно быть 3: 4, где высота зависит от высоты моего экрана, но ширина не зависит от ширины экрана. Только высоты экрана.

Мне показалось, что я понимал прежнее время, но это было не так.

У меня есть это:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
    });
</script> 

И я не знаю, что делать с шириной.

Answer 1

Вам понадобится JavaScript для вычисления ширины, это невозможно сделать только с HTML.

Соответствующее свойство window.innerHeight; умножьте это на (3/4), чтобы получить высоту, и, поскольку (3/4) * (4/3) == 1, window.innerHeight (случайно) равен желаемой ширине.

Затем установите свойства элемента .height и .width.

Примечание. Я предполагаю, что вы хотите, чтобы прямоугольник был пропорционален окну браузера, а не экрану пользователя. Если вы действительно хотите размер экрана, используйте window.screen.height вместо window.innerHeight; но будьте осторожны: с появлением широкоэкранных конфигураций и конфигураций с несколькими мониторами браузер может отображать довольно странные измерения.

Answer 2

HTML не диктует этого. CSS может, но у CSS нет прямой внутренней математической логики. Итак, что вам нужно сделать, это использовать JavaScript.

Когда страница загрузится, возьмите ширину объекта, сделайте математику, а затем установите высоту.

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

$('#myDiv').width($(this).height()*.75);