CSS实现16:9等比例盒子
2024-08-26 12:31:40
问题：图片的宽度100%，高度要始终自适应为16:9。
解决方案：
1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。
2、但是，我们的原则是能用css实现的功能尽量用css，这有利于后期项目的维护。css同样可以实现这个问题，我们可以利用边距的百分比属性定义来优雅实现。
我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百分百填充到我们设置的区域里面。
那么外面盒子宽度100%，高度0，但是因为有padding-bottom为9/16的比例，所以外层盒子始终是16:9等比例，再绝对定位设置图片宽高都100%即可。
<div class="scale">
<img src="" class="item"/>
</div>
css代码：
.scale {
width: %;
padding-bottom: 56.25%;
height: ;
position: relative;
}
.item {
width: %;
height: %;
background-color: aquamarine;
position: absolute;
}
这样即可，比较简单，就是思维上的灵活运用。
最新文章
- 【转】Sqlite 混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该...
- 修正 Memo 設定為 ReadOnly 後, 無法有複製的功能
- jQuery 之 Callback 实现
- 3.聚类–K-means的Java实现
- 如何实现ZBrush中部分模型的选择和隐藏
- DelayQueue
- 【HDOJ】3016 Man Down
- C字符数组及其应用
- mktime性能问题
- 2014 HDU多校弟八场H题 【找规律把】
- 基于spark和sparkstreaming的word2vec
- 静态代码块详解（原出处：http://versioneye.iteye.com/blog/1129579）
- Spring data Redis
- 词向量：part 1 WordNet、SoW、BoW、TF-IDF、Hash Trick、共现矩阵、SVD
- JS基础速成（一）
- MyBatis与MySQL交互
- javascript语言扩展:可迭代对象（2）
- Oauth2手册 第一章
- SpringMVC学习（四）———— 数据回显与自定义异常处理器
- *浅解嵌入式中的BootLoader