Markdown 调整图片位置与大小

FAILED
白色玫瑰 程序猿

时间: 2023-07-12 阅读: 2 字数:5359

sjxi.cn
如果您使用的 Markdown 编辑器支持 CSS 样式的话,那么可以使用 CSS zoom 属性对图片相对于自身大小进行等比缩放。如果一定要宽高按照不同比例进行缩放,那么可以计算好缩放后的宽高像素值,采用下面指定宽高像素值...

文章目录

1.图片语法格式 2.调整图片位置

  1. <a href="#21__10">2.1 居左</a> <a href="#22__28">2.2 居中</a> <a href="#23__43">2.3 居右</a> <a href="#3_58">3.调整图片大小</a>
  2. <a href="#31__59">3.1 等比缩放</a>
  3. <a href="#311__60">3.1.1 相对父级元素</a> <a href="#312__67">3.1.2 相对自身</a> <a href="#32__80">3.2 非等比缩放</a>
  4. <a href="#321_CSS__81">3.2.1 CSS 属性</a> <a href="#322__86">3.2.2 指定宽高(单位像素)</a> <a href="#_96">参考文献</a>

1.图片语法格式

插入图片后,Markdown 表示图片的语法格式如下:

  1. ![图片描述](图片URL地址)

2.调整图片位置

使用 Markdown 编写文档或博客时,经常需要对图片的位置与尺寸进行调整。

2.1 居左

居左一般为常见 Markdown 编辑器放置图片的默认位置,我们也可以显示设置图片居左。

(1)方法一:在 ULR 末尾添加位置标识。

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

(2)方法二:嵌入 HTML 代码。

  1. <div align=left>
  2. <img src=https://img-blog.csdnimg.cn/20200822014538211.png />
  3. </div>

2.2 居中

(1)方法一:添加位置标识。

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

(2)方法二:嵌入 HTML 代码。

  1. <div align=center>
  2. <img src=https://img-blog.csdnimg.cn/20200822014538211.png />
  3. </div>

2.3 居右

(1)方法一:添加位置标识。

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

(2)方法二:嵌入 HTML 代码。

  1. <div align=right>
  2. <img src=https://img-blog.csdnimg.cn/20200822014538211.png />
  3. </div>

3.调整图片大小

3.1 等比缩放

3.1.1 相对父级元素

使用 img 标签表示图片时采用百分比形式只定义宽即可等比例缩放。注意:宽度相对于图片所在父级窗口。

  1. <img src=https://img-blog.csdnimg.cn/20200822014538211.png width=100% />

3.1.2 相对自身

如果您使用的 Markdown 编辑器支持 CSS 样式的话,那么可以使用 CSS zoom 属性对图片相对于自身大小进行等比缩放。遗憾的是大部分 Markdown 编辑器并不支持 CSS 样式,比如 CSDN Markdown。

  1. <img src=https://img-blog.csdnimg.cn/20200822014538211.png style="zoom:50%;" />

一个通用可行的办法是指定宽或高的绝对数值进行等比缩放,只指定宽和高中一个。本文的示例图片尺寸为 481*279px,那么设置图片宽度为 240px 或高度为 140px 即可将图片宽高等比缩小为原来的一半。

  1. <img src=https://img-blog.csdnimg.cn/20200822014538211.png width=240 />
  2. # 或
  3. <img src=https://img-blog.csdnimg.cn/20200822014538211.png height=140 />

3.2 非等比缩放

3.2.1 CSS 属性

可以利用 CSS 的属性 transform:scale(x,y) 和 transform-origin:left top 来完成非等比缩放。其中 transform-origin:left top 的作用是改变缩放的中心点位置为左上角,而非默认的中心位置。

  1. <img src=https://img-blog.csdnimg.cn/20200822014538211.png style="transform:scale(0.8,0.5);transform-origin:left top;" />

3.2.2 指定宽高(单位像素)

同样的,大部分 Markdown 编辑器并不支持 CSS 属性。不过好在该种操作并不常见,因为可能会导致图片变形。如果一定要宽高按照不同比例进行缩放,那么可以计算好缩放后的宽高像素值,采用下面指定宽高像素值的方式来实现。

  1. <img src=https://img-blog.csdnimg.cn/20200822014538211.png width=384 height=140 />

此种用法并不常见,因为可能会导致图片变形。


参考文献

知乎.markdown中插入图片怎么定义图片的大小或比例?
CSDN 问答.HTML 如何设置图片宽高分别为原宽高的不同比例?
简书.css的Transform详解

原文地址:https://blog.csdn.net/K346K346/article/details/108162853?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168915726716800197057299%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168915726716800197057299&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-14-108162853-null-null.142^v88^insert_down1,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:sjxi.cn/detil/e6b5008b921b4ce8be9022f74401518b

打赏作者

本站为非盈利网站,如果您喜欢这篇文章,欢迎支持我们继续运营!

最新评论
当前未登陆哦
登陆后才可评论哦

    湘ICP备2021009447号

    ×

    (穷逼博主)在线接单

    QQ: 1164453243

    邮箱: abcdsjx@126.com

    前端项目代做
    前后端分离
    Python 爬虫脚本
    Java 后台开发
    各种脚本编写
    服务器搭建
    个人博客搭建
    Web 应用开发
    Chrome 插件编写
    Bug 修复