Fix: limit the max width of image in content, new essay

Fix the appear of image in content so it wouldn't overflow the content
card.

Note that the inline image cannot be displayed in the same line as text,
because the image is centered by display:block and set margin-x as auto.

exampleSite/content/essays/add-picture-in-post/index.md

@@ -0,0 +1,38 @@
+---
+title: "Add Picture In Blog"
+date: 2023-01-24T20:04:07+08:00
+tags: []
+categories: []
+weight: 50
+show_comments: true
+katex: false
+draft: false
+---
+
+In this essay, we will talk about how to add a picture in blog.
+
+<!--more-->
+
+There are many ways to add a picture, the one to use pure markdown syntax is `![](./path/to/picture)`.
+
+Now I will show you a BIG picture (3600x2180):
+
+![Big picture](./TEIDE.JPG)
+
+And a small picture (30x20):
+
+![Small markdown mark](./markdown-30x20.png)
+
+Here is a inline markdown mark ![Small markdown mark](./markdown-30x20.png).
+
+## Some other things
+
+**Note** that due to the *big picture* is from [Wikipedia][wikipedia] who use [CC-BY-SA 3.0][cc-by-sa-3] as license, so this essay also use [CC-BY-SA 3.0] as license.
+
+The *big picture* is from <https://en.wikipedia.org/wiki/Image>.
+
+The small markdown mark has been dedicated to the public domain.
+
+[wikipedia]: https://wikipedia.org/ "Wikipedia"
+[cc-by-sa-3]: https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License "Creative Commons Attribution-ShareAlike License 3.0"
+

static/css/style.css

@@ -475,8 +475,11 @@ body {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-.content .markdown-image img {
+.content img {
-  max-width: 100%;
+  max-width: 92%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 .content .anchor {
   visibility: hidden;