Intrinsic Size 媒體寬高比

HTML 文件在編寫插入 <img> 時，通常都會順便加上寬高的資訊，早期這樣做除了指定圖片呈現時的大小外，還有一個好處是提升頁面繪製的速度，不用在圖片讀取好、知道實際寬高時，又重新排版重畫版面，不過這個狀況在用 CSS 設定動態寬度時，就又回到原點了，像是設定 width: 100%; 這種，因為沒辦法設定相對於圖片寬度的高度值，所以瀏覽器只能自己先隨便決定一個高度，等圖片抓好再重排一次。

一直以來這問題都沒好的方案處理，在排版上比較多人採用的是外面多一層 block 元素然後用 padding-top 來把空間先佔好，不過這也只算是個替代方案，真的要處理應該還是要從 HTML 或是 CSS 下手，然後前兩天才終於看到有個不錯的方案 Chrome 要來實做了，叫做 Intrinsic Size ：

<img intrinsicsize="250 x 200" src="cat.jpg">

就是一個長乘寬的概念，中間那個乘號其實是小寫的 x ，然後提供的長寬資訊其實是等於預先給的 naturalWidth、naturalHeight，為什麼不用 aspect ratio 呢？在提案的文件裡面其實都有寫到，基本上就是這種設計提供的資訊更多，有更多好處，例如都沒設定寬高時，可以拿 intrinsicsize 來先用之類的， intrinsicsize 目前設計只能用在圖片和影片上，Chrome 預計 在 71 的時候推出這個功能，也已經做好 有貓 的 測試網頁 了，感覺一切都箭在弦上了，不過這新提案在 WICG 上幾乎沒 討論 ，提案者是 WICG 也是 Chromium 成員就是，另外就是另外三家的 web platform status 都還查不到，並且，其實也有一個 CSS 的 aspect-ratio 提案 ，所以到底會怎樣還很難說啊（不過我覺得是會變標準啦）。