写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】

关于图片的使用

文本主要介绍:修改图片大小或比例、图片对齐方式、图片的并排以及使用心得。

目录

  • 关于图片的使用
    • 前言
    • 图片语法
    • 修改大小
      • 方法 1
        • 小技巧
      • 方法 2
    • 对齐方式
    • 图片并排
      • 方法 1
      • 方法 2
      • 方法 3

前言

  我们在写博客的时候经常会插入图片来使博客一目了然。但是图片的大小、对齐方式往往会影响美观。
图片太大,显得突兀;图片太小,又显格格不入。下面跟大家说说我所收集的一些关于图片的使用技巧。

图片语法

  • 插入图片的语法如下。
    在这里插入图片描述

  • 语法说明如下。

    1. 图片代替文字在图片无法正常显示时会比较有用,正常情况下可以为空。
    2. 图片地址可以死本地图片的路径也可以是网络图片的地址。
    3. 本地图片相对路径和绝对路径两种方式。

修改大小

方法 1

语法如下。

![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =200x200)

注意:= 前有个空格,可以只写宽度,但 x 不能去掉。如 =200x

演示如下。
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第1张图片

小技巧

修改图片的比例有

  • 【1:1 】
  • 【3:2】
  • 【4:3】
  • 【16:9】

什么意思呢?我们以【16:9】为例

可以宽为160像素,高为90像素。
也可以宽为320像素,高为180像素。

我们在插入图片时,图片地址往往会很长很长,写作时看着不简洁。
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第2张图片
我们可以去掉.jpg后面的字符,图片还是正常显示的。
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第3张图片
小编现在还不知道.jpg后面代表的是啥~
有大佬知道的会可以下方留言呀!


方法 2

使用 HTML 的 标签


写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第4张图片

img 的高度、宽度除了使用像素单位,还可以使用百分比。


写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第5张图片

粘贴即用

图片名称


对齐方式

修改对齐方式只要在 标签上加个 div即可。

写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第6张图片

align参数:

  • center 居中
  • right 左对齐
  • left 右对齐

图片并排

方法 1

个人比较推荐此方法!!!
在这里插入图片描述
在每一张图的末尾加空个就会留一个空白。
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第7张图片 写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第8张图片 写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第9张图片
不加空格则入下图所示。
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第10张图片写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第11张图片写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第12张图片

注意:不能换行

![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)![描述](https://img-blog.csdnimg.cn/20200323204819408.jpg =100x)

方法 2

  • 同上加空格留空白
  • 不加直接“连体”
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第13张图片 写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第14张图片 写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第15张图片

方法 3

在表格里实现多张图片并排

写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第16张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第17张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第18张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第19张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第20张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第21张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第22张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第23张图片
写博客时的“奇技淫巧”——【修改图片大小、对齐、并排】_第24张图片

粘贴即用

对齐方式

<div  align="center">

<div>

图片并排

![描述](图片地址)![描述](图片地址)![描述](图片地址)

表格并排

参考地址:
https://blog.csdn.net/qq_21808961/article/details/80666589
https://www.zhihu.com/question/23378396
https://blog.csdn.net/qq_33826564/article/details/81303230

你可能感兴趣的:(#,Markdown)