css写宽高比不变的盒子

<head>
<meta charset= " UTF-8 " >
<meta name= " viewport " content= " width=device-width, initial-scale=1.0 " >
<meta http-equiv= " X-UA-Compatible " content= " ie=edge " >
<title>Document </title>
<style>
. container {
width : 100 %;
height : 100 %;
overflow : hidden;
}
. item {
background : gray;
width : 80 %;
margin-left : 10 %; //让item居中
padding-bottom : 30 %; //padding的百分比是按container的width算的
}
< /style>
</head>
<body>
<div class= " container " >
<div class= " item " >
111111111111111111
</div>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/saamao/article/details/79941740