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)
ね?酷いでしょ(笑