标签：百分比 盒子 16 100% 宽度 CSS 设置 css

　　问题：图片的宽度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: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

　　这样即可，比较简单，就是思维上的灵活运用。

标签：百分比,盒子,16,100%,宽度,CSS,设置,css
来源： https://www.cnblogs.com/goloving/p/10745921.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。