标签：02 reset 22 sizing 2020 katex em font size
CSS如何实现固定宽高比
一、元素尺寸已知，直接写宽高
二、尺寸未知，可替换元素（img、video等），指定宽度或者高度，另一个自动计算。
<div class="wrapper">
<img src="./picture" alt="">
</div>
.wrap{
width: 50vw;
}
img{
width: 100%;
height: auto;
}
三、普通元素实现固定宽高比
使用padding-top/padding-bottom实现
<div class="wrapper">
<div class="box"></div>
</div>
.wrap{
width: 50vw;
}
.box{
width: 100%;
height: 0;
padding: 0;
padding-bottom: 75%;
}
上述使用padding-bottom来撑开盒子，实现4/3的比例。但是如果box盒子要放入内容的话，可以使用绝对定位来充满盒子。
.box{
position: relative;
width: 100%;
height: 0;
padding: 0;
padding-bottom: 75%;
margin: 50px;
background-color: lightsalmon;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
标签：02,reset,22,sizing,2020,katex,em,font,size 来源： https://www.cnblogs.com/ylweb/p/12364435.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。