使用CSS調整內嵌圖像的大小

我編寫技術文檔。有時我需要在我的指示中包含一個GUI圖標的內嵌圖像。內聯圖像通常是圖標的屏幕截圖。有時候，截圖比周圍的文字大得多，如下圖所示。它看起來不好，這讓我很難過。使用CSS調整內嵌圖像的大小

是否存在的CSS規則的組合，保證了嵌入式圖像的尺寸與它周圍的文字一樣嗎？

2016-10-10 Kayce Basques

爲什麼不使用字體真棒？ –

@TonyHensler是什麼讓你覺得FontAwesome的圖標與應用程序Kayce編寫的技術文檔相同？在技術文檔中，您希望圖像儘可能接近實際界面。 –

它可能看起來很糟糕，但您的用戶現在不僅知道外觀，還知道他們正在尋找的圖標的大小。 –

你在找什麼是CSS單位「em」，其中1 em表示當前字體大小的1倍。意味着您可以將img-Tag的max-width/max-height設置爲1em。使用vertical-align: middle水平居中圖像。

h1 img, 
 
h3 img { 
 
    max-width: 1em; 
 
    max-height: 1em; 
 
    vertical-align: middle; 
 
}

<h1> 
 
    Big header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">) 
 
</h1> 
 
<h3> 
 
    Small header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">) 
 
</h3>

這裏有一個的jsfiddle可以更動：https://jsfiddle.net/qvd56t62/6

來源

2016-10-10 23:49:09 KoalaGangsta

賓果。雖然，我認爲將'max-width'限制爲'1em'也是不合理的。我有時會使用比他們更長的圖標。在這些情況下，圖標的高度會比周圍的文字小。 –

使用CSS調整內嵌圖像的大小

回答

相關問題