CSS实现宽度自适应宽高16:9的矩形的示例

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

https://www.jb51.net/css/753385.html

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

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

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

		*{
			margin: 0px;
			padding: 0px;
		}
		
		.wrap{
			width: 20%;
		}
		
		.box{
			width: 100%;
   
			height: 0px;
			
			padding-bottom: 56.25%;
			position: relative;
			background: pink;
		}
		
		.box p{
			width: 100%;
			height: 100%;
			position: absolute;
			color: #666;
		}
	
	
		
			
				
  这是一个16：9的矩形
			
		
	

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

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