heightとwidthで画像サイズを指定しよう

height属性、width属性とは

height属性は、主に画像などの高さを設定するのために用意されたHTMLのタグです。いくつかの要素に使用することができる属性ですが、非推奨とされている要素が多いため、imgタグを中心に使用すればOKです。
wdth属性は要素の幅を設定するために使用される属性です。

指定するには、どちらも属性値にpxや%などの単位を使って指定します。

HTMLの問題に挑戦しよう！

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題5：heightとwidthで画像サイズを指定しよう

heightとwidthを使用して表示する画像のサイズを指定しましょう。

縦幅を600、横幅を1000で指定してください。

あらかじめエディタに書くコード

                <img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像">
¥HTML¥
              

期待する画面

解説

widthは画像の横幅を指定し、heightは画像の高さを指定します。
単位は省略されますが、実際には、「px」と同様の表示サイズで指定されます。

今回はwidthの値を1000、heightの値を600で設定すればOKです。

ログインして解答を見る

補足

画像のサイズを指定する場合は縦横比率を考えて指定するようにしましょう。
縦横比率を無視して画像サイズを指定すると画像は粗く表示されたり歪んでしまうことがあります。
数値の設定には注意しましょう。

画像サイズの指定に悩んだ場合は、どちらか片方だけを指定しましょう。
widthとheightどちらか片方のみ指定した場合は自動的に縦横比率を
考慮したなりゆきのサイズになります。コチラは活用できそうですね!