为 Markdown 图片加上大小吧!

对于 Markdown 文章,对于图片的处理很简单。

但是转化成 HTML 后,<img src="url" /> 不带有图片的大小。

那么这样带来的问题是什么呢?

浏览器在未加载完图片数据的时候,浏览器是不知道其大小的
所以,默认大小都是 0,除非通过 style 设置了大小
之后的某个时候,图片加载完成,浏览器得到图片大小,新视觉影院6080文章就会有跳动的感觉,阅读体验不佳

解决该问题,可以在书写 markdown 文本的时候插入图片就书写成 <img width="100" height="100" src="url" />

但是现在有更方便的 node package => markdown-image-size.

将会解析 markdown 文本,得到 <img> ![]() 文本中的 src ,通过读本地文件或发送请求得到图片数据,从而得到图片大小,然后进行文本 替换/插入 即可。

使用

npm install -g markdown-image-size
 Usage: mimgs [options] <files...>

 Options:

   -v --version                get current version
   -h --help                   how to use it
   -s --source <path or url>   base path from relative path
   -o --overwrite              overwrite files
   -q --quiet                  Don't print any
   -l --log                    Do print log, Don't print text
   --ignore-relative           ignore relative path, overrides any -s options.
mimgs -s "dirPath or baseUrl" file/to/*.md -o
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在Markdown中,可以通过使用<img>标签来更改图片大小。通过设置img标签的width属性来调整图片的宽度,例如width="600"可以将图片的宽度设置为600像素。同时,可以使用<p align="center">标签将多张图片进行并列排版,并根据图片大小和浏览器窗口的大小自动调整每行图片的个数。例如,可以使用以下代码实现并列排版的图片: ``` <p align="center"> <img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" /> <img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" /> <img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" /> <img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" /> </p> ``` 这将在一个段落中居中显示四张宽度为400像素的图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Markdown图片对齐方式及尺寸设置](https://blog.csdn.net/tugepaopaoo/article/details/130196496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [markdown中修改图片大小](https://blog.csdn.net/weixin_43363871/article/details/108374904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值