跳转至

如何为 Markdown 中的图片设置 CSS样式?


2018-12-05 by dongnan

问题描述

在上一篇文章中使用 django-mdeditor 富文本编辑器来编写 Markdown文档。 但是 django-mdeditor 编辑器上传的图片是使用原始尺寸的,可能会出现图片宽度超过文章宽度问题。

markdown 文本

## this is pictrue

![elk](/media/editor/t1_20181107140717543870.png "elk")

原始图片尺寸

解决方法

django-mdeditor 编辑器支持在图片后面加上对应的CSS样式,这样我们就可以使用CSS来调整图片的尺寸(样式)。

## this is pictrue

![elk](/media/editor/t1_20181107140717543870.png "elk"){: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)和一个灰色的边框。

参考

markdown中插入图片怎么定义图片的大小或比例?

回到页面顶部