1. 程式人生 > >當div的寬度為百分比時,如何設定高與寬相等

當div的寬度為百分比時,如何設定高與寬相等

今天做了一個demo,其中要用到圓形,首先想到的就是給一個div設定寬等於高,再加上border-radius等於寬的一半就好了

div {

    width: 200px;

    height: 200px;

    border-radius: 100px;

}

但是如果div的寬度是百分比,繼承的是父元素的寬度的百分比時,高度該如何設定為等於寬呢?

div {
  width: 20%;
  height: 0; // 設定高為0,讓padding撐起高
  padding-bottom: 20%; /* 讓div的高等於寬 */
  border-radius: 50%;
}
此時將padding-top/padding-bottom設定為百分比時,是基於父元素寬度,正好和width相等;在使用border-radius=50%,就實現了自適應的圓形。