【Hugo】markdown中图片大小和对齐方式调整

前言

当在Hugo博客网站中以Markdown格式编写博客内容时，直接使用图片的原始尺寸可能会导致页面排版混乱，甚至影响用户体验。为了优化页面显示效果，我们需要对图片的尺寸大小和对齐方式进行调整。

Markdown本身并不提供直接调整图片大小和对齐的方法，但可以借助HTML标签实现这些调整。这些标签提供了更灵活的方式来控制图片的显示效果。

调整图片大小

设置图片大小是保持页面布局整洁和用户体验良好的关键。通过指定图片的宽度和高度，我们可以确保图片在不失真的情况下适应页面布局。

1）使用HTML标签设置图片大小

要注意的是，设定尺寸的图片需要指定width 和 height。

这两个参数可以是具体数值，也可以是百分比形式。

width和height的参数设置

1）宽度确定，高度自适应。

2）宽度自适应，高度确定。

设置图片对齐方式

除了大小，对图片的对齐方式也是十分重要的。居中、左对齐或右对齐可以使页面排版更加美观，提升可读性和视觉吸引力。

2）使用HTML标签设置图片大小设置图片对齐方式

使用align属性对图片对齐方式进行设置。

align的参数设置

1）居中对齐

    
...

2）靠左对齐

    
...

2）靠右对齐

    
...

4）多个图片居中对齐