Kayce Basques Kayce Basques - 3 months ago 14
CSS Question

Use CSS to resize inline images

I write technical docs. Sometimes I need to include an inline image of a GUI icon in my instructions. The inline image is often a screenshot of the icon. Sometimes, the screenshot is much larger than the surrounding text, like in the image below. It looks bad, and that makes me sad.

example of inline image that is larger than surrounding text

Is there a combo of CSS rules to ensure that the inline image is the same size as its surrounding text?


What you are looking for is the CSS Unit "em" where 1 em represents 1 times the current font size. Means you can set the max-width/max-height of the img-Tag to 1em. Use vertical-align: middle to horizontally center the image.

h1 img,
h3 img {
  max-width: 1em;
  max-height: 1em;
  vertical-align: middle;
    Big header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)
    Small header (<img src="https://image.freepik.com/free-icon/male-user-silhouette_318-35708.jpg">)

Here's a JSFiddle you can mess around with: https://jsfiddle.net/qvd56t62/6