0

I want to embed an image in to my README.md markdown document on GitHub, but I want it to be responsive, so I decided I want it to behave like max-width.

I tried doing:

<div align="center">
  <img src="./logo.svg" style="max-width: 24em">
</div>

But when I put it on GitHub it doesn't respect my max-width: 24em. In fact, when I inspect the element in the browser devtools, I see that it resolves to max-width: 100%!

So how do I do this proper?

Ivan Rubinson
  • 3,001
  • 4
  • 19
  • 48

1 Answers1

0

What is happening is that GitHuB sanitizes the markup before rendering it, and in your case removes the inline style. (See this reference on GitHuB Markup readme for what happens.)

Instead, one option is to use the width attribute. For example:

<img src="./logo.svg" width="24em">

Of course, what you are looking for is a max-width so you can make it responsive, not simply width. If that is truly necessary, then you may be to do it with CSS. (As described in this answer.) In this case embed the image using normal markdown syntax:

![logo](logo.svg)

And then have in a custom CSS file with:

img[alt=logo] { max-width: 24em; }

A possible option (but no guarantees on this), since your image is an SVG, is to embed the CSS directly within it using the <foreignObject> tag. Or you could use a different SVG for this purpose. This gets your custom CSS available for use by the readme. Here's an article that explains how to do this. If you can do it all in the same SVG, all the better.

lakeside
  • 49
  • 6