Hong Cheung 
注意
この方法を使うには .mdx が必要です
私は Markdown でブログ記事を書くのが大好きです。
しかし、画像の変更は悩みの種のひとつです。
この記事では、少しの HTML を使って画像のサイズを変更し、好きな位置に配置する方法を説明します。
心配しないでください。しっかり案内します。
問題
Markdown のブログ記事に画像を挿入する唯一の方法は、これだけです：
結果：
可愛いのは分かりますが、画面全体を占領しています！もっと小さく表示したいと思いませんか？
サイズ変更
ここでは、少しの HTML でその問題を解決できます。
 を使う代わりに、次のように書きます：<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />コードの説明：
src は、その猫の画像のソース（source）の略です。
alt には、これ - ! [picture description here] ( Link ) を入れます。
style は、画像の表示方法を変更するためのものです。ここでは、どんな場合でも最大幅 400 ピクセルで表示するように設定しています。
結果：
max-width は好きな値に変更できます。
ただし、ここで max-height を変更していないことに注意してください。画像に幅と高さの両方を固定して指定すると、画像が歪んでしまう可能性があり、それは避けたいからです。
ですから、画像の縦横比を正しく保つために、max-width か max-height のどちらか一方だけを指定するのが望ましいです。
位置
画像をデフォルトの左寄せではなく、中央に配置したい場合もあるでしょう。
それは ‘max-with: 400px;’ の後に ‘margin: auto;’ を追加することで実現できます。
コード：
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />結果：
素晴らしい！これで、ブログ記事の画像サイズを変更する基本的な方法が分かりましたね。
次に、同じ結果を実現する別の方法を紹介したいと思います。おそらくこちらの方が優れています。
私が好んで使っている Markdown での画像変更方法を見てみましょう。
私のおすすめ
コード：
<div style="max-width: 400px; margin: auto"> </div>結果：
ご覧のとおり、結果は上記と同じです！しかもコードはよりすっきりしています。 さらに重要なのは、画像を挿入するデフォルトの方法をそのまま使えることです：
そして、それを div（この文脈では画像のためのコンテナ）で囲みます。
<div style="max-width: 400px; margin: auto"></div>style=“max-width: 400px; margin: auto” を覚えていますか？img で使ったものです。
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />ここでは、その style の変更を、画像を保持するコンテナに適用しているだけです。
<div style="max-width: 400px; margin: auto"> </div>こうして、両方の利点を得られるのです！見た目もすっきりしていますね！
読んでいただきありがとうございました。お役に立てれば幸いです！
何か問題があれば、下のコメント欄でお知らせください。
楽しい執筆を！
