参见英文答案 >
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>
原文地址:https://www.jb51.cc/css/223526.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。