CSS如何使图片固定为正方形
2021-05-08 本文已影响0人
吞风咽雪
<style>
/* 这一段不必要 */
html,body {
height: 100%;
}
/* 以下是关键代码 */
#wrap {
width: 50%;
height: 100%;
background: #089e8a;
}
#box {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
background: #74b1f4;
}
#box img {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
</body>
这是一个css小技巧：
当 padding-bottom/padding-top/margin-top/margin-bottom 的值为百分比的时候：
计算结果是参照父元素的宽度。
- 当我们设置height:0;padding-bottom:100%;
- 元素的宽高就始终保持一致了。
- width = height -> 正方形。
