<style>
/* 這一段不必要 */
html,body {
height: 100%;
}
/* 以下是關(guān)鍵代碼 */
#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小技巧：
當(dāng) padding-bottom/padding-top/margin-top/margin-bottom 的值為百分比的時候：
計算結(jié)果是參照父元素的寬度九榔。
- 當(dāng)我們設(shè)置height:0;padding-bottom:100%;
- 元素的寬高就始終保持一致了。
- width = height -> 正方形。
