HTML編集画面での、縦横比そのままでの画像サイズの変更方法

今回は、前回の記事に記載の方法等で、記事の中に画像を挿入した場合の、

挿入画像のサイズ変更の方法について、書いていきたいと思います。

もう既にご存知の方も多いかもしれないのですが、

自分あてのメモの意味も兼ねて、共有させて頂きます。

下記の画像は、記事編集画面の右の方にある画像を、ドラッグ＆ドロップで移動して挿入したものです。

HTMLの編集画面で、この画像のHTMLのソースを見ると、次のようになっています。

<p><img src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg" alt="" border="0" /></p>

このHTMLのソースを、HTMLの編集画面で、次のように書き換えると、

画像の大きさを変えることが出来ます。

<p><img width="20%" src="https://blogimg.goo.ne.jp/user_image/0e/b0/676c8385cd34f1ee19d013a63e46c149.jpg" alt="" border="0" /></p>

 実際にソースを変えてみたのが下の画像です。

画像が縮小されて表示されています。

上記の20%の部分の数字を変えることで、画像を任意の大きさに拡大したり

縮小したりすることが出来ます。

ちなみに、数字を50%、100%に変えた場合は、下記のようになります。

↓ width="50%"

↓ width="100%"

この方法を使う場合、縮小表示は問題ないのですが、拡大表示の場合、

画像が少し荒くなってしまいます。

ですので、拡大表示される場合には、その点、ご留意ください。

以上、少しでもお役に立てれば幸いです。

もし何かお気付きの点がございましたら、遠慮なくコメントしてくださいね。

ご意見・ご感想等、お待ちしております