随笔- 4  文章- 1  评论- 0  阅读- 9764 

参考链接:

  1. https://www.cnblogs.com/suodi/p/16712348.html
  2. https://blog.csdn.net/qq_42518956/article/details/116755381
  3. 这个还有图文混排效果实现左图右文或右图左文的效果:https://blog.csdn.net/tugepaopaoo/article/details/130196496

总概:

总该:大小改变可以用markdown语言,居中、右对齐则需要使用html语言的标签。

虽然他们都说markdown图片链接后面加上#pic_center这类参数有用,但是我尝试发现没效果,不知道什么原因。 =200x参数则有效。要是能用的话其实这个很方便,不用借助html语言。

有人在标签内容加上“alt=图片描述”属性,若是加上的话,本来鼠标放在图片上也没有图片描述文字出来,加上渲染后看不到,也没用啊,当然md文字可以看到

px:像素,如200px x 400px
**x:宽度确定,高度等比例,完整形式是ab x bc如200x400
x**:高度确定,宽度等比例

图片大小改变

  • 使用markdown语言图片大小设置可以是:

    • 图片链接后面直接加上 =200x =200x300注意等号前面有个空格
  • 使用<img>标签,图片大小设置可以是:

    • 数值形式:

      • width="200"或width="200x"height="300或height="300x",固定尺寸可同时指定宽和高;不然也可以仅指定一个,另一个等比例。也可以用像素值,width="200px"height="300px"
    • 百分比形式(不推荐):

      • width="60%"特性:这个百分比缩放下的图片会跟着浏览器窗口大小改变而改变。
      • 用上style和zoom,style="zoom:20%"。这个能缩放,但点开图片会看不了。

图片位置改变

  • 对齐方式可以是:
    • 在<img>标签内添加align="right"属性,即<img src="图片链接" align="left" />,这个是实现左图右文或右图左文的效果,注意无法居中,因为"middle"属性在这测试不起作用。最好用别的标签如包裹<img>标签,如下三种方式,可以实现更多非图文混合的效果。下面的三种方式若<p><div>标签不写align="center"属性,只是<p><img src=...align="left"></p>则也还是图文混合的。

    • <img>标签放在<p align=“center”> . . . </p>的省略号中使用;

    • <img>标签放在<div align=“center”> . . . </div>的省略号中使用;

    • <img>标签放在<center> . . . </center>的省略号中使用,只能居中,left和right参数还是会回归默认的无格式——左对齐;
      多张图片并列排版话,每行图片的个数会根据图片的大小及浏览器窗口的大小自动进行调整
      另,博文Markdown中图片对齐方式及尺寸设置中讲到,

      需要左右混排的文字放在<p> . . . </p>标签内,且需在标签行的下面。放在<p>. . . </p>标签外的排版为正常的上下排版样式。

      但是本文测试结果是,上下排版没有结果,都是左右排版。
      测试代码如下:

      <p>
      <img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg align="left" width=400 />左边的文字。左边的文字。左边的文字。左边的文字。左边的文字。左边的文字左边的文字。左边的文字。左边的文字。左边的文字。左边的文字。左边的文字。左边的文字左边的文字。左边的文字。左边的文字。
      </p>
      这是上下的文字。上下的文字。是的规范化的浮点数的喉舌然后突然的广东富豪购房合同然后这是文字这是文字这是文字。

      测试截图:

      黄色标记的文字应该是另外上下的段落的,但测试结果显示不是。

各效果展示

下面是各效果展示:

1. 原图

![原图](https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg)

原图

2. markdown调节大小

markdown图片格式,可以直接在链接地址后添加形如 =300x200 =200x =x300的数字即可调整图片大小。(推荐)

属性 =300x200

![原图](https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg =300x200)

原图

属性 =200x

![原图](https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg =200x)

原图

3. html格式调节大小和位置:

因为默认图片左对齐,那么能居中就表示对齐格式设置有效,右对齐改成right即可。

居中,大小属性分别是width=200width=200pxwidth=200px alt="图片名称"width=200xwidth="30%"style="zoom:20%"。这里是多张图片并列排版,每行图片的个数会根据图片的大小及浏览器窗口的大小自动进行调整,不想它有调整的话,每个img都单独用<div align="center">...</div>来包围就好了。

<div align="center">
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200/>
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200px />
<img src="https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg" width=200px alt="图片名称" />
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200x />
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width="30%" />
<img src="https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg" style="zoom:20%" />
</div>
图片名称
将``部分单独包围的代码如下,即使浏览器全屏,第四张图片也不会调整到第一行
点击查看代码
<div align="center">
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200/>
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200px />
<img src="https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg" width=200px alt="图片名称" />
</div>
<div align="center">
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width=200x />
</div>
<div align="center">
<img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg width="30%" />
</div>
<div align="center">
<img src="https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg" style="zoom:20%" />
</div>
图片名称

4. 其它钻牛角尖的尝试:

html格式试试markdown能用的 200x,没有width。结果无效。<center><img src=https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg =200x /></center>

html用的width,有效<center><img src="https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg" width="200" height="200" alt="图片名称" /></center>

图片名称

markdown格式测试 #pic_center =200x,居中对齐是无效的,大小调整是有效的。

![图片描述](https://img2024.cnblogs.com/blog/2845014/202406/2845014-20240617165451537-517285446.jpg#pic_center =200x)

图片描述

结论

markdown格式下图片默认左对齐。居中和右对齐要借助html格式,且需要用<p align="center">等,因为直接在<img>标签写align="center"已经无效。

所以,

  • 只是改变大小,markdown格式的图片链接后面直接加上 =200x注意等号前面有个空格最方便。其次用<p align="right"><img src="图片链接" width=200></p>,这里要指定对齐方式是因为直接用<p><img src="图片链接" width=200></p>是图文混合排版,不是我想要的。

  • 如果既要改变大小,又要指定对齐方式,那么用<p align="right"><img src="图片链接" width=200></p>,当然居中的话,用<center><img src="图片链接" width=200></center>也可以。

 posted on   长时  阅读(6356)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示