No.493


【Markdown】画像リンクの大きさ調節

リンク時にも画像の縦横の大きさを指定したい

 Markdownの記法で画像を表示すると、画像の大きさそのもので表示されてしまう。そのため、大きさを調整するときは、HTMLの img タグを使用して回避するのが一般的だ。

 画像をリンクにするときもその記法が使えたのでメモしておく。


記法

 通常の文字によるリンク記法の文字部分を画像タグ <img> にしてしまえばよい。
 これで縦横指定など自由に行える。

[<img src="画像URL" width="○%">](リンク先URL)

 具体的には下記のようになり

[<img src="https://i.imgur.com/KwPMFeq.jpeg" width="100%">](https://imgur.com/a/q9tYHzT)

 こう表示される。


駄目な例

 一般的な下記の記法だと、画像がそのままの大きさで表示されてしまう。

[![代替テキスト](画像URL)](リンク先URL)

 下記のように酷いことになる(笑

[![掃除前の上部ローラー](https://i.imgur.com/5C1CWAo.jpeg)](https://imgur.com/a/q9tYHzT)

掃除前の上部ローラー

 ね?酷いでしょ(笑