摘自《CSS揭祕》---LEA VEROU著

難題

　　眾所周知，如果我們不給元素指定固定的高度（height），它會根據其內容的高度自適應。假如我們希望寬度（width）也具有類似的行為，該怎麼做呢？舉個例子，假設我們用HTML5來標記圖片元素，結構程式碼可能是這樣的：

<p>文字</p>
<figure>
    <img src="" alt="" width="" height="" />
    <figcaption>
     The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
    
 
</figcaption>
</figure>
<p>文字</P>

　　假設還需要給它新增一些基本的樣式，比如一道邊框。在預設情況下，他看起來如下圖所示。演示連線

　　但我們實際上希望這個figure元素能跟它所包含的圖片一樣寬（圖片的尺寸通常不是固定的），而且是水平居中的。目前這個渲染結果距離我們的期望還有不小的差距：文字行比圖片要寬多了。如何讓figure的寬度由它內部的圖片來決定，而不是由它的父元素來決定呢？闖蕩江湖這麼多年，相信你已經積攢了一套順手的CSS程式碼大全。在這個程式碼庫裡，你可能會找到幾段可以滿足這種寬度行為的程式碼，它們通常是以副作用的方式來實現的。

　　（1）讓<figure>元素浮動會讓它得到正確的寬度，但同時也徹底改變了它的佈局模式，這往往會導致我們不想要的結果。演示連線

　　（2）對<figure>應用display：inline-block會讓它根據內容來決定自身的尺寸，但跟我們想要的效果還是不一樣（參見下圖，演示連線）此外，即使它的寬度計算方式與我們所期望的一致，我們也很難繼續完成水平居中的任務。我們需要對它的父元素應用text-align:center，然後對這個父元素的所有子元素（p，ul，ol，dl.....）都設定一遍text-align:left。

　　（3）當開發者走投無路時，就只能對figure應用一個固定的width或max-width了，然後對figure>img應用max-width:100%。可是這個方法無法充分利用有效空間；對於過小的圖片來說，佈局效果也很突兀。此外，響應式也無從談起。

　　有沒有一種合適的CSS技巧可以解決這個問題？我們是不是應該放棄這條路，改用指令碼來動態地為每個figure設定寬度？

解決方案

　　CSS內部與外部尺寸模型（第三版）是一個相對較新的的規範，它為width和height屬性定義了一些新的關鍵字，其中最有用的應該就是min-content了。這個關鍵字將解析為這個容器內部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素）。這正是我們夢寐以求的！現在，使用以下兩行CSS程式碼就可以把figure設定為恰當的寬度，並讓它水平居中：

figure {
    width: min-content;
    margin: auto;
}

　　你可以在下圖中看到效果。 演示連線

　　為了給那些舊版瀏覽器提供一個平穩的回退樣式，我們需要在使用這個技巧的同時，提供一個固定的max-width值，比如：

figure {
     max-width: 300px;
     max-width: min-content;
     margin: auto;
}
figure>img {
     max-width: inherit;
}

　　對於現代瀏覽器來說，後一條max-width宣告會覆蓋前一條。如果figure的尺寸是由內部因素決定時，第二條規則中的max-width:inherit就不會生效了。