CSS完成总宽响应式宽高■16:9的矩形框的实例

日期：2021-01-21 类型：科技新闻 

关键词：小游戏源代码，互动小游戏微信，自制小游戏，html5游戏，制作游戏大概多少钱

前边大家讲了如何做一个响应式宽高1:1的正正方形

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

如今大家来说讲做响应式16:9的矩形框要如何做

第一步先测算高宽比，假定宽100%，那麼高为h=9/16=56.25%

第二步运用以前常说设定padding-bottom方式完成矩形框

<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		/* .wrap:包囊矩形框的div，用于操纵矩形框的尺寸 */
		.wrap{
			width: 20%;
		}
		/* .box 矩形框div，总宽是.wrap的百分之百，这关键是以便便捷高宽比的测算 */
		.box{
			width: 100%;
                        /*避免矩形框被里边的內容撑出过剩的高宽比*/
			height: 0px;
			/* 16:9padding-bottom:56.25%，4:3padding-bottom:75% */
			padding-bottom: 56.25%;
			position: relative;
			background: pink;
		}
		/* 矩形框里边的內容 ，要设定position：absolute，才可以设定內容高宽比100%和矩形框一样 */
		.box p{
			width: 100%;
			height: 100%;
			position: absolute;
			color: #666;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box">
				<p>&nbsp;&nbsp;它是一个16：9的矩形框</p>
			</div>
		</div>
	</body>

相近不一样的占比矩形框，都可以以用这类方式完成

到此这篇有关CSS完成总宽响应式宽高16:9的矩形框的实例的文章内容就详细介绍到这了,大量有关CSS 总宽响应式宽高內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：HT■ML5键入框往下拉莱单作用的实例编码 返回下一篇：没有了