在 markdown 中插入图片的时候,一般情况下是靠左侧的,在 markdown 也可以使用 HTML
语法进行图片的插入,来方便控制图片的大小和位置。
图片大小的设置
在 markdown 中使用 img
标签来插入图片,并用 height
、width
对图片的大小进行控制,可以指定图片的大小或者相对于原始图像的百分比。
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341">
<img src="图片路径" alt="图片名称" height="50%" width="50%">
<img src="图片路径" alt="图片名称" height="100px" width="400px">
原始图片:
重新设置图片的大小:
<img src="图片路径" height="50%" width="50%">
图片位置的设置
自己是用 Typora
编写的 markdown,在里面能正常显示图片的位置,但是通过 Jekyll
加载到网页里面的时候,图片又自动靠在了左侧,在网上看到一个简便的方法可以将图片设置居中。通过 center
标签来控制。或者在外面包围 div
标签( <div align="center">
)
<center>
<img src="图片路径" height="50%" width="50%">
</center>
<div align="center">
<img src="图片路径" height="300" width="200">
</div>
显示图片居中:
图片标题
类似于超链接,你可以给图片增加title
属性来提供需要更进一步的支持信息。在我们的例子中,可以这样做:
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum">
这会给我们一个鼠标悬停提示,看起来就像链接标题:
图片标题并不必须要包含有意义的信息,通常来说,将这样的支持信息放到主要文本中而不是附着于图片会更好。不过,在有些环境中这样做更有用,比如当没有空间显示提示时,也就是在图片栏中。
备选文本
属性是 alt
,它的值应该是对图片的文字描述,用于在图片无法显示或不能被看到的情况。
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
测试alt
属性最简单的方式就是故意拼错图片文件名,这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 dinosooooor.jpg
,浏览器就不能显示图片,而显示:
通过为图片搭配说明文字的方式来解说图片
<div class="figure">
<img src="/images/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341">
<p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>
有一个更好的做法是使用 HTML5 的 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure) 和 [
元素,它正是为此而被创造出来的:为图片提供一个语义容器,在标题和图片之间建立清晰的关联。我们之前的例子可以重写为:
<figure>
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341">
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
这个<figcaption>
元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了<figure>
元素的内容.
注意<figure>
里不一定要是一张图片,只要是一个这样的独立内容单元:
- 用简洁、易懂的方式表达意图。
- 可以置于页面线性流的某处。
- 为主要内容提供重要的补充说明。
<figure>
可以是几张图片、一段代码、音视频、方程、表格或别的。