Bloggerブログ|検証！縦横のサイズを指定して数値通りに画像を表示する

　多くのブログサービスではimgタグ内のheight・widthの数値を変更することで任意の画像サイズに変えることができますが、Bloggerブログではその方法で画像のサイズを変更できないことがあります。

　オリジナル画像の縦横比を保ちながら画像の大きさを変える（リサイズする方法）

　特に「縦横比を崩して画像を貼り付けたい」という場合は、height・widthの数値を変更しただけではうまくいきません。
　（2019/06/01/追記　使用しているテンプレートにより挙動が異なります）

　Bloggerブログでは画像サイズを決定する要素は他にもあり、imgタグ内にある/s200//s320//s400//s640/という、他ではあまり見かけないBloggerブログ独自の表記も気にする必要があります。

　このページではオリジナルサイズの縦横比を崩して画像を貼り付けるためにいろいろと模索した結果の一部を載せています。

　一つの画像を一つの場所で表示する分にはジェネレーターを使ってリサイズしたものを貼り付けるのが一番手っ取り早い訳ですが、記事本文で使用した画像を他の場所で使い回すというとき、例えばトップページのサムネイルやサイドバーで使用するときに、それぞれの場所で設定している縦横比がまちまちであったために、なかなか思うように画像が表示できないということがあったので、それについて調べた結果です。

　Bloggerブログの画像サイズについて書かれている海外のサイト

s○○をw○○-h○○-cに変更する

　話を進める前にエディターを使って画像を貼り付けたときに、実際にどのようなタグが生成されるのか確認しておきます。


　画像を挿入するとaタグとimgタグが生成され、imgタグの中には以下の属性が自動で設定されます。

　ただし画像を貼り付ける際に「元のサイズ」を選択するとwidth・heightが設定されません。
　画像のサイズはあらかじめ指定しておいた方がページの読み込み速度が速いので「元のサイズ」を適用する際はご注意ください。

　では本題です。
縦横の数値を指定してそのサイズ通りに表示するには、src属性の中の「s○○」と書かれているところを「w○○-h○○-c」に変更し、そこに任意の数値を記述して、さらにwidthの数値も変更するようにします。
　（2019/06/01/追記　使用しているテンプレートにより挙動が異なるようで、heightの数値も変更しなければならないものもあるようです）
　上の例では白字で/s200/と書かれているところです。
　wの後の数値は幅（横）、hの後の数値は高さ（縦）を表しています。

検証！横の方が長い画像の場合

　先程と同じ画像を使い、どのようにサイズが変化するのか数値を変更して確認してみます。
　まずはs200をw200-h200-cに変更し、widthはそのままの200、heightを50にしてみます。


　縦200px横200pxの正方形の画像が表示されています。
縦の長さをheight="50"に指定しているにも関わらず、その数値通りの高さで表示されていません。
　では今度は逆にwidthを50、heightを200としてみます。


　画像が小さくなってしまいました。
　ここまでの結果から「w○○-h○○-c」と記述すると、以下のような画像処理が行われることになると言えそうです。
　
　ではheightの数値は一体どうなってしまったのでしょうか・・・
　これはもしかしたら横長の画像のみで見られる現象なの？ということでさらに縦長の画像で検証してみました。

検証！縦の方が長い画像の場合

　この縦長の画像をs200からw200-h200-cに変更し、さらにwidthを200、heightを500にしてみます。

新婚さんいらっしゃいに出てた歳の差カップル

　
　正方形で表示されています。やはり縦長の画像でもheightの数値は無効となってしまうようです。