如何为 Markdown 中的图片设置 CSS样式？
2018-12-05 by dongnan
问题描述
在上一篇文章中使用 django-mdeditor 富文本编辑器来编写 Markdown文档。
但是 django-mdeditor 编辑器上传的图片是使用原始尺寸的，可能会出现图片宽度超过文章宽度问题。
markdown 文本
## this is pictrue
原始图片尺寸
解决方法
django-mdeditor 编辑器支持在图片后面加上对应的CSS样式，这样我们就可以使用CSS来调整图片的尺寸(样式)。
## this is pictrue
{:class="img-responsive"}
带有CSS样式的图片尺寸
Bootstrap 图片样式
响应式图片
通过在 <img /> 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素(宽度自适应)。
例如： <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" />
其它样式
.img-rounded：添加 border-radius:6px 来获得图片圆角。.img-circle：添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。