at backyard

Color my life with the chaos of trouble.

GitHubのREADMEで画像サイズを指定する方法

ちょっと苦労したので備忘録として残しておきます。

前提条件

  • あくまで自身の備忘録として残しているので、網羅的な内容ではない
  • GitHubのissueに画像をアップロードして、そちらの画像をREADMEから参照からする際にこの指定方法を用いている
  • GitHub Flavorにおける指定方法である可能性もあるが、他のmarkdownで指定できるかまでは試していない。

参照したページ

下記のページを読んで色々試したりしていました。

image resize in github flavored markdown. · GitHub

結論

<p align="center">
  <img src="画像URL" alt="altテキスト" width="指定したい幅(例: 400px)">
</p>

※ちなみに p タグに付いている align="center"text-align:center;と同じもの。
今回の内容からは外れるので、割愛します。

このようにして width="横サイズ" を指定するすることで、GitHubのREADME上で表示させたときにいい感じに表示してくれます。

ちなみに height="縦サイズ"も指定できるのですが、こちらを指定すると、例えばスマフォ表示時など画面幅が狭まったときに、比率がおかしくなります。
(縦に伸びてしまう)