BLOG

こんにちは、Zenです。

フィリピンのセブ島にあるIT留学、英語留学のグローバルITアカデミーでのインターン研修をしております。

今日は、昨日配置した画像のサイズを指定する方法をご説明したいと思います。

 

１．画像の大きさを指定するには横の大きさはwidth属性、縦のサイズはheight属性を用います。

指定しない場合は元の大きさのまま表示されます。

 

 

i

 

 

 

 

 

 

 

前回使用した画像はサイズ: 960 × 539で、上記のように画面に表示されます。

 

２．今回は前回の画像の下に下記のようにサイズを指定して画像を挿入してみました。

<img src=”images/home_image.jpg” width=”200″ height=”125″>

＝<img src=”images/home_image.jpg” width=”ピクセル値” height=”ピクセル値”>

 

<img src=”images/home_image.jpg” width=”30%” height=”30%”>

＝<img src=”images/home_image.jpg” width=”ウィンドウの幅に対する%” height=”ウィンドウの高さに対する%”>

(現在調査中：今回のケースではウィンドウ幅に対して30％になっていますがケースによって異なるようです。

結果が分かり次第ご報告させていただきます。）

 

 

 

 

 

 

 

３．では実際に画面を見てみましょう。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

サイズが変更されていますね。

ピクセルとか言われてもまだいまいちサイズ感がピンときませんが、

実際に画面を見て調整すれば、なんとかなるだろうという期待を抱いております。

それではまた！

フィリピンで初のクリスマスを楽しみにしているZenでした。

 

※ピクセル（pixel:画素）・・・コンピュータで画像を扱うときの、色情報(色調や階調)を持つ最小単位、最小要素。

 

 

---

追記（12月2日）

コメントでサイズ指定の%は、“親要素の幅に対する%”とのご指摘をいただいたので、

確認のため表の中に画像を配置してサイズを調整してみました。

 

 

 

 

 

 

 

 

 

 

 

 

サイズ調整をする前は下の画面のようにバラバラのサイズです。

 

 

 

 

 

 

 

 

 

 

 

 

 

そして納まりよくなるようサイズを調整していったところ、こうなりました。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ふわふわ卵を作っている写真は240ピクセル×180ピクセルで、表にちょうどいい感じに納まったので比率を変更せずにそのまま使用しました。

ふわふわ卵をチキンライスにのせた写真は480ピクセル×360ピクセルで、倍率50％に指定したところ、縦横ともに元の画像の半分になり、表に程よく納まりました。

ですが、オムライス完成写真は150ピクセル×101ピクセルで一番小さいにもかかわらず、

縦横比率100％だと表から横にはみ出してしまうため85％に設定しました。

ページ上のサイズも230×155と大きくなっています。

この結果から元の画像に対する比率でも枠内のサイズに対する比率でも、勿論ウィンドウの幅に対する比率でもなく、検索しても“ウィンドウの幅に対する比率”とか、“%で指定した場合、ウィンドウサイズを変えると画像のサイズも変わります。”など実際試してみると違っている説明ばかりで、はっきりとした正解には辿りつけませんでした。

当面は目視で確認しつつ数値を調整したいと思います。

また、原因究明できたら追記させていただきたいと思います。

---

追記2（12月6日）

前回うまくいかなかったので、今回は表の写真挿入セル内のサイズを幅(width)280×高さ(height)190で指定し、上の表は幅100％で、下の表は高さ100％で指定してみました。

 

 

 

 

 

 

 

 

 

 

 

上段は表の内部の幅に合わせているため「ふわふわ卵のオムライス完成写真」は上下に若干余白ができています。

下段は表の内部の高さに合わせているため「ふわふわ卵のオムライス完成写真」を除く二つの写真には右に余白ができています。

 

 

 

 

 

 

 

 

 

 

スマホサイズで見てみると、幅で指定した方は自動的に表のサイズも写真のサイズも調整され、高さで指定した方は、幅が調整されず、画面に入りきらない分は隠れてしまっていることがわかります。ちなみに画面の高さを変えても表や画像の高さは変わらず、低くした分表が隠れていくだけでした。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

次に上の表は幅50％、下の表は高さ50％で指定してみました。

 

 

 

 

 

 

 

 

 

 

 

幅50％に指定した上段は表のセル内の幅に対してほぼ50％、高さ50％に指定した下段は表のセル内の高さに対して50％の大きさに画像が調整されているのが見て取れます。

 

 

 

 

 

 

 

 

 

 

 

スマホサイズで見てみましょう。100％の時と同様、幅で指定した方は自動的に表のサイズも写真のサイズも調整され、高さで指定した方は、幅が調整されず、画面に入りきらない分は隠れてしまっています。これらの事から%はウインドウの幅に対してではなく親要素に対する比率であることがわかります。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ちよっと脱線しますが、今度は試しに上段の画像の幅を指定する方はセル内も幅だけを指定し、下段の画像の高さだけを指定する方は、セル内も高さだけを指定してみました。

 

 

 

 

 

 

 

 

 

 

 

 

そうすると、このようになりました。

 

 

 

 

 

 

 

 

 

 

 

中央は文面が長いので下段の画像の隣にスペースができましたが、それぞれセル内の幅、高さに対して100％になっていることがわかります。

スマホ画面サイズにしてみると、上段は良い感じに縮小されました。この上段の指定方法はなかなか使えそうです。相変わらず高さ指定の下段は微動だにしませんでした。

 

 

 

 

 

 

 

 

 

 

 

 

 

結論：画像サイズの％は親要素に対する%である。

長々とここまで読んでいただき、ありがとうございます。

Zenでした！