这篇文章主要介绍了CSS实现宽度自适应宽高16:9的矩形的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前面我们讲了怎么做一个自适应宽高1:1的正方形
https://www.0133.cn/css/753385.html
现在我们来讲讲做自适应16:9的矩形要怎么做
第一步先计算高度,假设宽100%,那么高为h=9/16=56.25%
第二步利用之前所说设置padding-bottom方法实现矩形
这是一个16:9的矩形
类似不同的比例矩形,都可以用这种方法实现
到此这篇关于CSS实现宽度自适应宽高16:9的矩形的示例的文章就介绍到这了,更多相关CSS 宽度自适应宽高内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!
以上就是CSS实现宽度自适应宽高16:9的矩形的示例的详细内容,更多请关注0133技术站其它相关文章!