BLOG

 

HTML:画像の大きさを指定する

02 12月 2016, Posted by zen in GITA, ウェブの基礎知識, パソコン, フィリピン, プログラミング, 言語
ホームページに挿入した画像。サイズ変更後。

こんにちは、Zenです。

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

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

 

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

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

image-homepage-before

 

 

i

 

 

 

 

 

 

 

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

 

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

<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%になっていますがケースによって異なるようです。

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

ホームページに配置する画像のサイズ指示入力例の画像

 

 

 

 

 

 

 

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

image-homepage-after

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

それではまた!

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

 

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

 

 


追記(12月2日)

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

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

表の中に画像を挿入するためHTML記入画面

 

 

 

 

 

 

 

 

 

 

 

 

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

表にサイズ変更前の写真を挿入した画面。

 

 

 

 

 

 

 

 

 

 

 

 

 

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

表の中に挿入した写真のサイズを%で変更した入力例の画像

 

 

 

 

 

 

 

 

 

写真のサイズ変更後のホームページ画像

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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

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

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

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

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

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


追記2(12月6日)

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

表のセル内のサイズを指定した上で画像サイズを100%で指定した画像

 

 

 

 

 

 

 

 

 

 

 

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

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

表のセル内のサイズ指定して、画像サイズを100%で指定し、PCでみた画面。

 

 

 

 

 

 

 

 

 

 

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

 

表のセル内のサイズ指定して、画像サイズを100%で指定し、スマホサイズでみた画面。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

表のセル内の幅か高さどちらかだけ指定して、同じように画像サイズを幅か高さどちらかだけ50%で指定しした画像

 

 

 

 

 

 

 

 

 

 

 

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

表のセル内のサイズ指定して、画像サイズを50%で指定し、PCでみた画面。

 

 

 

 

 

 

 

 

 

 

 

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

表のセル内のサイズ指定して、画像サイズを50%で指定し、スマホサイズでみた画面。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

表のセル内の幅か高さどちらかだけ指定して、画像も同じく幅か高さだけ100%で指定した画像。

 

 

 

 

 

 

 

 

 

 

 

 

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

表のセル内の幅か高さどちらかだけ指定して、画像も同じく幅か高さだけ100%で指定し、PCでみた画面。

 

 

 

 

 

 

 

 

 

 

 

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

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

表のセル内の幅か高さどちらかだけ指定して、画像も同じく幅か高さだけ100%で指定してスマホサイズで見た画面。

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

Zenでした!

 

  • Teppei Tokikawa

    Zenさん お疲れ様です!

    ”ウィンドウの幅に対する%”これは、ちょっと誤解が生じるかもしれません。
    今回のコードで言えばそのとおりかもしれませんが、
    “親要素の幅に対する%”
    が正しいかと思います、再調査ください!

Post a comment