如何解决高度为100%时如何保持长宽比?
我在父div中包裹了一个iframe,我知道父div和iframe的高度将是其父(或页面)的100%。 像这样:
<div class="parent"> // will be 100% high
<iframe></iframe> // will be 100% high & wide,pos absolute
</div>
如何使parent
的宽度始终保持长宽比?
就像将iframe视频以padding-top: 56.25%;
的形式放置在父div中以保持4:3的长宽比一样,如何使用宽度?
解决方法
要进一步阐述我的评论:如果您所指的100%高度是视口高度,那么您可以轻松地使用migrate
单位来固定相对于视口高度的纵横比。
对于4:3的横向比例,高度为vh
,宽度为100vh
。您也可以将其手动计算为calc(100vh / 3 * 4)
(技术上为133.3333 ...)。
133vh
html,body {
margin: 0;
padding: 0;
}
.parent {
background-color: steelblue;
height: 100vh;
width: calc(100vh / 3 * 4);
/* Presentation only */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial,sans-serif;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。