如何在GitHub Markdown中为图片设置max-width属性？

问题原因 #

GitHub的全局CSS对所有img元素默认设置了max-width: 100%，这会覆盖你直接给img设置的max-width: 24em行内样式，导致效果失效。

可行解决方案 #

方案一：给图片同时设置width和max-width #

直接在img标签中组合width:100%和max-width:24em，既保证响应式，又限制最大宽度：

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

效果：图片会自适应父容器宽度，但最大不会超过24em，在窄屏自动缩小，宽屏保持24em的最大尺寸。

方案二：用容器限制宽度，图片自适应容器 #

先给外层div设置最大宽度，再让图片占满容器宽度：

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

效果和方案一一致，通过容器间接限制图片的最大宽度，图片会随容器宽度变化而自适应。

验证方式 #

上传到GitHub后，用浏览器开发者工具检查元素，会看到设置的样式已正常生效，不会被全局的max-width:100%覆盖。

内容的提问来源于stack exchange，提问作者Ivan Rubinson