您现在的位置是：网站首页> 编程资料编程资料

CSS实现宽度自适应宽高16:9的矩形的示例CSS背景图片固定宽高比自适应调整的实现方法CSS实现宽高等比自适应容器的方法CSS 实现的图片宽高自适应固定边框CSS实现的图片宽高自适应固定边框

2021-09-03 1093人已围观

简介这篇文章主要介绍了CSS实现宽度自适应宽高16:9的矩形的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前面我们讲了怎么做一个自适应宽高1:1的正方形

现在我们来讲讲做自适应16:9的矩形要怎么做

第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%

第二步利用之前所说设置padding-bottom方法实现矩形

  这是一个16：9的矩形

类似不同的比例矩形，都可以用这种方法实现

到此这篇关于CSS实现宽度自适应宽高16:9的矩形的示例的文章就介绍到这了,更多相关CSS 宽度自适应宽高内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！