強制響應圖像匹配父元素高度？

我有兩個元素。一個是H1標籤，另一個是IMG標籤。如果我有以下兩個要素的CSS：強制響應圖像匹配父元素高度？

h1 { 
    font-size: 2em; 
} 
h1 img { 
    max-width: 100%; 
    height: auto; 
}

HTML

<h1><img src="icon.png" /> Heading</h1>

我怎麼能有img元素繼承的高度和調整基礎上的字體大小？

謝謝！

這就是我得到：HTTP： //jsfiddle.net/hRkFQ/。你在找什麼？你的問題不是很具描述性 –

沒有js就無法完成。這是一個使用jQuery的解決方案 - http://jsfiddle.net/hRkFQ/2/ – Miro

將font-size: 1em;用於您的h1 img標記。

編輯

哎呀！對不起，我的意思是說，設置高度：1em，但錯誤地說是字體大小。

h1 { 
    font-size: 2em; 
} 
h1 img { 
    height: 1em; 
    vertical-align: middle; 
}

我正在服用@miro demo來拍攝img。 demo

2013-07-09 03:29:26

這並沒有改變任何事情。 –

請參閱編輯。 –

如果將高度設置爲1em，它將使用字體大小作爲高度。

h1 img { 
    height: 1em; 
    vertical-align: middle; 
}

注意，EM措施是相對父元素的字體大小，因此h1 img在1EM是說1塊h1字體大小（這是2em的）

2013-07-09 04:05:36

回答