以線寬爲單位

編輯：我着重做不是想依靠固定尺寸爲什麼東西。以線寬爲單位

我有一個圖像，我想與文本內聯顯示。我想要的形象

一）爲正方形，並且

B）是作爲文本一樣高。

想象一下，存在一個稱爲「H」的CSS單元，它等於線的高度，就像「ex」等於「x」的高度一樣。我希望能夠這樣寫代碼：

img.myclass { 
    width: 1H; 
    height: 1H; 
}

看來，no such unit actually exists。我對嗎？

如果沒有這樣的單位（謹慎地說，我希望從一條線上的基線到下一條線上的基線的距離），那麼我該如何實現我的目標：在沒有Javascript的情況下填充方形圖像？

來源

2012-10-30 spraff

圖像是否有平方比例或是否需要拉伸。 – Bruno

如果你不想依賴固定任何東西，並且想動態地做到這一點，你必須使用JavaScript或其他語言，可以在dom加載後觸發，它知道文本的高度。 – Ryan

您可以選擇固定寬度/高度，並將line-height和img width/height設置爲該常量大小，或者您可以使用javascript。設置新的CSS屬性時無法引用另一個CSS屬性，這是您似乎期望的。

來源

2012-10-30 18:14:03

我可能不是在看這個權利......但是你不能只是給這條線一個特定的高度，然後設置圖像以適應它？

<span style="display:inline-block;height:20px;"> 

Hello <img src="testtext.png" style="max-height:100%;" /> 

</span>

來源

2012-10-30 18:22:09

您可以在EMS或EXS 和文本的字體大小和/或行高，你可以使用同樣的措施對於圖像高度/寬度。但如果你想用一個變量來設置他們，我可能會建議LESSCSS

來源

2012-10-30 18:24:20 Robert

如果設置了line-height是一個特定的值x和你font-size爲特定值y那麼你知道，行高爲：x * y。然後，您可以獲得任意數量文本的高度。

例如：font-size: 10px;line-height: 120%;您的線高將爲120% * 10px或12px。如果你的文本塊是10行，那麼你知道它的高度爲120px。有關更多信息，請參閱W3 line-height和W3 font-size。

注：這是一個做事的非常不精確的方式。任何從屏幕尺寸到最終用戶瀏覽器上的自定義字體大小都會導致此問題。正如@ Irongaze.com所說的，當你設置一個新的設置時，你不能引用其他的css設置。這最好在JavaScript中完成。

來源

2012-10-30 18:27:29 Ryan

或簡單地設置行高爲12px ... :-) –

@ Irongaze.com http://stackoverflow.com/questions/10093218/css-line-height-smaller-than-font-size-results-in -odd-overflow-within-a-div這就是爲什麼這是一個糟糕的主意。實際上你可以使用比你的行高更大的字體大小，這對他所要做的事不起作用。 – Ryan

CSS有line-height屬性，因此，如果您設置到一定值時，說1.2或120%，那麼你知道什麼是EM排隊高度比，你可以使用作爲圖像的單元。

img.myclass {width:1.2em; height:1.2em}

但是請注意，圖像默認情況下與基線垂直對齊，而不與線條底部對齊。另見我的插圖this answer。

來源

2012-10-30 18:29:02

以線寬爲單位

回答

相關問題