Markdown给图片添加超链接，点击图片后，跳转新页面。放大缩小图片。

最新推荐文章于 2025-04-05 17:52:03 发布

pipizhou16

最新推荐文章于 2025-04-05 17:52:03 发布

阅读量4.6k

点赞数

文章标签： Markdown 图片链接全屏预览 HTML 超链接

本文链接：https://blog.csdn.net/pipizhou16/article/details/120760765

版权

本文介绍了如何在Markdown中实现点击图片跳转并全屏预览的功能。通过结合HTML和Markdown，可以为图片添加超链接，使得点击图片后不仅跳转到指定页面，还能在新页面中实现图片的全屏居中预览。测试代码包括HTML和Markdown两种方式，提供了灵活的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司用Markdown写了个项目说明
有个需求，就是点击图片，跳转到图片的链接（因为markdown不能放大缩小图片）

下面是超链接用法：

![alt属性文本](图片地址 ''图片title'')
alt属性文本，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加
图片的地址，可以是本地图片，也可以是网络图片地址

解决办法：
给图片添加超链接，点击图片后，跳转页面的同时图片放大到全屏居中。

下面是我的测试代码HTML和Markdown：

1、HTML
测试代码：

<a href="https://www.baidu.com"><img src="https://i-blog.csdnimg.cn/blog_migrate/49be7876fe4aed6f32813984cbbc97b7.png" alt="大象"></a>

点击图片，跳转到百度页面（a标签里的href）

2、Markdown
测试代码：

Markdown，点击图片跳转新页面，同时图片会全屏居中预览。

3、也可以把HTML代码直接写在Markdown中，这样也可以起作用。

4、也可以直接引用图片，然后在下面写个点击查看图片，这样也能起到同样效果。

点击查看图片