CSS製作正方形只要使用:before選取器就可以了
html
<div class="box"> <div class="content">內容文字Content Text</div> </div>
css
.box { display: inline-block; position: relative; width: 50%; } .box:before { margin-top: 100%; /* 比例 1:1 aspect ratio */ margin-top: 75%; /* 比例 4:3 aspect ratio */ margin-top: 50%; /* 比例 2:1 aspect ratio */ margin-top: 200%; /* 比例 1:2 aspect ratio */ } .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }