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

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

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

方法一:当你插入图片后是不是会出现以下的类似代码?

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b002792d3c1126bfb5bfdd45d384582e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg0NTMzMA==,size_16,color_FFFFFF,t_70)

首先,可以将"?“之后、”#pic_center"之前的代码全部删除,这部分是管理右下角水印用的。之后你将会得到:

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

直接加入" =AxB"(A、B为像素值,注意A之前有一个空格,B可以省略,这样系统会按照长宽百分比自动匹配B的值)
另外,还可以将#pic_center修改如下:

  • #pic_right 右对齐
  • #pic_center 居中对齐
  • #pic_left 左对齐

下面让我们来看一下效果:

色图王帅照
色图王帅照
色图王帅照
方法二:把图片改成一个标签,

这是已有的链接

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

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

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

让我们来看看效果:

是不是发现了一个问题?

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

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

简单修改代码如下:

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

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

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

你甚至还可以这样:

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

还可以这样:

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

还可以……

在这里插入图片描述

  • 7
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值