在 div 中自动拟合 markdown 图像答案

【问题标题】：Automatically fitting markdown images inside a div在 div 中自动拟合 markdown 图像
【发布时间】：2019-05-15 16:49:42
【问题描述】：

所以我试图将降价文本+图像放入面板中。我正在将flask blogging extension 整合到我的网站中。问题是这会立即呈现包含图像链接和段落的文本，因此我无法单独选择图像来调整它们的大小。我是否可以对 div 块进行样式设置，以使所有文本和图像都正确放入其中。这就是我渲染atm的方式，

<p style="width: 100%">{{ post.rendered_text | safe }}</p>

它适合文本，但图像有时会超出 div。如果有人能指出正确的方向，我将不胜感激。

面板代码，

<div class="panel panel-default" style="margin-top: 60px; "> <!-- Blog Post -->
            <div class="panel-heading">
              <h3 class="panel-title">{{ post.title }}</h3>
            </div>
            <div class="panel-body" style="width: 100%">
              <p style="width: 100%">{{ post.rendered_text | safe }}</p>         
            </div>

            <div class="panel-footer">Posted by Name on Date</div>

          </div>

【问题讨论】：

您能否添加您迄今为止工作的部分的片段或小提琴，并更好地解释您期望达到的结果？

标签： html css flask flask-bootstrap

【解决方案1】：

要在 div 中自动适应 markdown，您需要使用来自 python-markdown 的 Attribute lists extention。

这是一个小例子：

main.py

# We import the markdown library
import markdown
from flask import Flask
from flask import render_template
from flask import Markup

app = Flask(__name__)
@app.route('/')

def index():
  content = """
Chapter
=======

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

Section
-------

* Item 1
* Item 2
"""
  content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))
  return render_template('index.html', **locals())


if __name__ == '__main__':
    app.run(host='0.0.0.0', port='3000')

templates/index.html

<html>
  <head>
    <style>
      .rounded-corner {
  border-radius: 50%;
}
    </style>
    <title>Markdown Snippet</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

您需要在使用 markdown 插入的每个图像之后插入类名，例如 rounded-corner:

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

插入ids或其他键的方法相同：

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: #someid alt='dolphin'}

当你将 markdown 转换为 html 时，你需要调用你需要的扩展：

  content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))

要在 div 中添加图片，您需要使用python-markdown extra

【讨论】：