CSS 正方形 寬 等於 高 height equals width

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; 
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *