参见英文答案 >
Maintain the aspect ratio of a div with CSS14答案假设我有一个div，它的宽度为body的50％。如何使其高度等于该值？因此，当浏览器窗口宽度为1000px时，div的高度和宽度都为500像素。
解决方法
如果你愿意忍受一些限制和跨浏览器的问题，这可以使用纯CSS。然而，它可以轻松，灵活地使用Javascript。如果你需要一个纯CSS解决方案，请参阅其他答案。
将div的宽度设置为(例如)50％，使用JavaScript来检查其宽度，然后相应地设置高度。这里是一个代码示例(我使用jQuery，一个JavaScript库)：
- $(function() {
- var div = $('#dynamicheight');
- var width = div.width();
- div.css('height',width);
- });
- #dynamicheight
- {
- width: 50%;
- /* Just for looks: */
- background-color: cornflowerblue;
- margin: 25px;
- }
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <div id="dynamicheight"></div>
如果希望框在调整大小时使用浏览器窗口进行缩放，请将代码移动到函数并在窗口调整大小事件上调用它。这里也是一个演示(查看示例全屏和调整浏览器窗口)：
- $(window).ready(updateHeight);
- $(window).resize(updateHeight);
- function updateHeight()
- {
- var div = $('#dynamicheight');
- var width = div.width();
- div.css('height',width);
- }
- #dynamicheight
- {
- width: 50%;
- /* Just for looks: */
- background-color: cornflowerblue;
- margin: 25px;
- }
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <div id="dynamicheight"></div>
