本文為學習《CSS世界》第 4 章后所作筆記。

內聯替換元素和塊級替換元素使用同一套尺寸計算規則。

尺寸有 3 種：固有尺寸、HTML 尺寸、CSS 尺寸

這幾種尺寸是有優先順序的：CSS 尺寸 >  HTML 尺寸> 固有尺寸，比如說 CSS 尺寸會覆蓋 HTML 尺寸。

圖片資源的固有尺寸是無法改變的。

可以通過改變 object-fit 屬性值改變 <img> 元素適配 HTML 尺寸和 CSS 尺寸的方式。

例子：

<img> 是替換元素，現在有一張圖片 1.jpg，它的原始尺寸是 605 x 311，這個 605 x 311 就是 1.jpg 的固有尺寸。

將圖片引入，顯示的是原始尺寸

現在在 HTML 標簽上給設置 width 為 200px，顯示的尺寸就變成 width、height 為 200px，這個在 HTML 標簽里設置的 width 跟 height 就叫 HTML 尺寸。

HTML 尺寸覆蓋掉了固有尺寸。

圖片資源的固有尺寸是無法改變的，這里相當于在圖片外側畫了個固定尺寸的 200x200 的矩形，讓圖片去拉伸填充這個矩形。

現在給設置樣式，width 設置為 300px，這個叫 CSS 尺寸

CSS 尺寸覆蓋掉了 HTML 尺寸、固有尺寸

對于某些替換元素而言，如果沒有設置尺寸，那么最終寬 300 px 高 150 px

按照規范，如果 <img> 沒有設置尺寸，寬高應該是 300x150，但實際上在 Chrome 中是 0x0，在 IE 中是 28x30