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.
This commit is contained in:
leafee98 2023-01-24 21:23:12 +08:00
parent fcfd69e10e
commit 10441a59a8
4 changed files with 43 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View file

@ -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"

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

View file

@ -475,8 +475,11 @@ body {
word-break: normal; word-break: normal;
overflow-wrap: anywhere; 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 { .content .anchor {
visibility: hidden; visibility: hidden;