[Q&A] HTMLで画像別にサイズを変えたい時のコードの書き方を教えてください＞＜

HTMLで画像別にサイズを変えたい時のコードの書き方を教えてください＞＜

HTMLで画像別にサイズを変えたい時のコードの書き方を教えてください＞＜

プログラミング初心者で簡単なウェブサイトを練習で作っています。
画像を長方形で表示したいものと
正方形で表示したいものがあるのですが
すべての画像が正方形で表示されてしまいます…

0 likes

1Answer

html

<img src="..." alt="長方形" width="200" height="100">
<img src="..." alt="正方形" width="100" height="100">

html

<img src="..." alt="長方形" style="width:200px;height:100px">
<img src="..." alt="正方形" style="width:100px;height:100px">

html

<img class="rectangle" src="..." alt="長方形">
<img class="square" src="..." alt="正方形">

css

.rectangle {
  width: 200px;
  height: 100px;
}
.square {
  width: 100px;
  height: 100px;
}

上2つの方法は画像それぞれのサイズがバラバラな場合におすすめです。
CSSを使う方法は、画像のサイズがある程度揃っている場合におすすめです。
style属性/CSSであれば、px以外の単位も使えます。

0Like

Are you sure you want to delete the question?