dongnan
总版主
总版主
  • 粉丝52
  • 发帖数2168
  • 铜币13301枚
  • 威望5857点
  • 银元150个
  • 社区居民
  • 最爱沙发
  • 忠实会员
  • 原创写手
阅读:62回复:0

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

楼主#
更多 发布于:2018-12-05 15:42
问题描述
使用 mdeditor编辑器(markdown)上传的图片使用原始大小的,所以可能会出现图片宽度超过文章宽度。

1. markdown  
## this is pictrue
# 原始图片尺寸
![elk](/media/editor/t1_20181107140717543870.png "elk")
2. 原始图片尺寸

图片:markdown-img-size-1.png




解决方法
直接在图片后面加上对应的CSS样式,

1. markdown  
## this is pictrue
# 带有CSS 样式的图片尺寸
![elk](/media/editor/t1_20181107140717543870.png "elk"){:class="img-responsive"}
2. 带有CSS 样式的图片尺寸

图片:markdown-img-size-2.png




扩展: Bootstrap 图片样式

1. 响应式图片
通过在 <img /> 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素(宽度自适应)。
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" />
2. 其它样式
    .img-rounded:添加 border-radius:6px 来获得图片圆角。
    .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
    .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。


参考: https://www.zhihu.com/question/23378396
#
游客

返回顶部