错位的梦寐

如何设置 Markdown 图片的大小、居中

2019-12-08


在 markdown 中插入图片的时候,一般情况下是靠左侧的,在 markdown 也可以使用 HTML 语法进行图片的插入,来方便控制图片的大小和位置。

图片大小的设置

在 markdown 中使用 img 标签来插入图片,并用 heightwidth 对图片的大小进行控制,可以指定图片的大小或者相对于原始图像的百分比。

<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,浏览器就不能显示图片,而显示:

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

通过为图片搭配说明文字的方式来解说图片

<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> 可以是几张图片、一段代码、音视频、方程、表格或别的。

参考

  1. markdown中图片如何指定大小
  2. 如何让Markdown图片居中
  3. 图片来源:gratisography
  4. HTML中的图片

上一篇 最小二乘法

Comments

Content