Markdown编辑器修改插入图片的大小

作为一个blog小白,刚接触markdown时总是会发现自己放的图片又大又难看,修改不了插入图片的大小而有着如下的困惑:
在这里插入图片描述

那么要怎么让自己的上铺选手照片变得小巧可爱呢?由此我总结了以下简便的方法:

方法:直接把图片改成一个标签,

这是已有的链接

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200413154813373.png#pic_center)

这是修改后的标签,其中width后的参数可以用来调节缩放百分比。

<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="20%">

让我们来看看效果:

是不是发现了一个问题?

这种方法的确能缩放,但是好像不能居中。

可惜我是上学期Web大作业A+++++++的前端小王子,这种问题怎么可能解决不了呢?

简单修改代码如下:

<div align="center">
	<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
</div>

但有时小熊猫想要肩并肩并排跳舞,该咋办呢?

很简单呐,直接往里使劲塞标签不就得了
<div align="center">
	<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
</div>

你甚至还可以这样:

<tr height="200px">
	<td>
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	</td>
	<td height="100%">
		<tr height="30%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="10%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="10%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="10%">
		</tr>
	</td>
	<td>
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	</td>
</tr>

还可以这样:

<tr height="200px">
	<td>
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	</td>
	<td height="100%">
		<tr height="30%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="10%">
		<tr height="30%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="3%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="3%">
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="3%">
		</tr>
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="10%">
		</tr>
	</td>
	<td>
		<img src="https://img-blog.csdnimg.cn/20200413154813373.png" width="30%">
	</td>
</tr>

还可以……

posted @   小白酒菊  阅读(541)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示