Aspect Ratio

Aspect Ratio支援度:Can I Use

Aspect Ratio是什麼?

• 可以為元素添加長寬比 width / height，便利於計算auto尺寸

/* 以下寫法都可以實現 */
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

在以前需要遇到要寫等比例的情況時，

/* before */
.img_container{
  position:relative;
  width:30%;
  height:0;
  padding-top:30%;
  margin:0 auto;
}
.img{
  position:absolute;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  background-color:red;
}

用aspect-ratio以後

/* after */
.img_container{
  position:relative;
  width:30%;
  aspect-ratio:1/1;
  margin:0 auto;
}
.img{
  width:100%;
  height:100%;
  background-color:red;
}

有了aspect-ratio真的方便很多，尤其是在清楚長寬比例的時候，可以直接寫aspect-ratio:寬/高，也不用再特別算百分比比例了~

Codepen範例

IT15-Day18-aspect-ratio

參考來源

• https://www.tpisoftware.com/tpu/articleDetails/2932
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio