CSDN之关于图片

CSDN之关于图片

一、设置图片大小

上传图片后会得到一个链接。如图所示：

1.1 代码

括号内的就是所需要的链接，即 https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70。

将链接复制并代替下面这行代码中的“链接”这两个字。

<img src="链接" width="50%">

例如：

1.2 效果

      其中 width=“50%”中的数字可以改变以此来调整图片大小

二、同一行插入一张或多张图片

1. 同一行插入多张图片

2.1.1 代码

<table>
    <tr>
        <td ><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70" >图1  示例1 </center></td>
        <td ><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70"  >图2 示例1</center></td>
    </tr>
    <tr>
        <td><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70"  >图3 示例1</center></td>
        <td ><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70"  >图4 示例1</center> </td>
    </tr>
    <tr>
        <td><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70"   > 图5 示例1</center></td>
        <td><center><img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70"  > 图6 示例1</center></td>
    </tr>
</table>

2.1.2 效果

图1 示例1	图2 示例1
图3 示例1	图4 示例1
图5 示例1	图6 示例1

2. 同一行插入一张图片

2.2.1 代码

<table>
    <tr>
        <td><center>
        <img src="https://img-blog.csdnimg.cn/20200708090326166.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjgzMjMxMw==,size_16,color_FFFFFF,t_70" />
        </center>
        <center>
        图1 示例图
        </center></td> 
    <tr>
</table>

2.2.2 效果

图1 示例图