css 保持比例的盒子。来自http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Posted 2021-05-13

/* <div class="ratio-box"><div class="ratio-content">content</div></div> */

.ratio-box {
	position:relative;
	width:100%; /*set the width here*/
}
.ratio-box::before {
	content:"";
	display:block;
	padding-top:75%;	/*4:3 ratio*/
	padding-top:56.25%;	/*16:9 ratio*/
	/*(padding percentages refer to the width of the containing block)*/
}
.ratio-content {
	position:absolute;
	top:0; right:0; bottom:0; left:0;
}