實現圖片恆定寬高比的屬性 — intrinsicsize

開發中可能會遇到這樣的需求：一個響應式頁面，它的圖片寬度是隨頁面大小變化的，而且圖片高度和寬度要保持固定的比率。（這裏假設圖片是<img>元素，不是做爲background，頁面上要顯示圖片的寬高比與圖片自己的寬高比並不必定相同。）

若是在移動端，圖片經過rem或vm來設置寬高度就能夠了，由於對於肯定的設備瀏覽器的寬高是能夠肯定的。

而在PC端，能夠隨意的改變瀏覽器的大小，若是要保證圖片的寬高比，用JS是一種方法，更常見的解決方案是在圖片外層新增一個容器，並設置height爲0，而後利用padding-top或padding-bottom來把盒子「撐高」，圖片定位於容器左上角，寬高設爲100%，有點hack的味道。

.outer {
  position: absolute;
  width: 100%;
  padding-bottom: 56.25%; /* 這裏寬高比爲16:9 */
  ...
}

.inner {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

padding-bottom的值即 (高度 / 寬度) * 100%，它的百分比是相對於盒子的寬度而不是高度。

若是使用屬性intrinsicsize就很簡單了

<img src="..." intrinsicsize="16x9" />

下面是對比，試着改變預覽區大小，能夠看到圖片的變化是同樣的
https://jsbin.com/zoxixiwefa/...

比較經常使用的場景是卡片式圖片列表，好比下面是某直播平臺的列表頁，省略了一些CSS，分割線上是平臺採用的padding方案，分割線下是用intrinsicsize屬性實現。

https://jsbin.com/zazajazige/...