画像の大きさを指定する時のCSS(imgタグにwidthdepxや%)

2023-02-042023-02-09

画像（img）の注意点

画像(img)は、cssにサイズ表記が未指定の場合、画像本来の大きさで表示されます。

NGの場合の指定方法

下記の場合は、画像サイズは、小さくなりません。

例えば、下記のようにpやdivで、imgの外側から幅を指定しても、画像の幅が大きい場合は、画面やbox幅からはみ出して画像本来の大きさで表示されまます。

    <p class="oyabox"><!-- 親要素 -->
      <img src="cat.png" alt="［写真］"> <!-- 子要素 -->
    </p>

.oyabox{
  width: 100px;
}

％指定の場合は、親要素サイズのからの%になる

imgの幅を%指定したときは、元の画像サイズからではなく、親要素の幅に対しての%サイズになります。

画像（img）タグ内にクラスを入れて指定

今回は128pxの「cat.png」のこちらの画像を用意しました。

CSSで格納した画像のサイズ表記を変える

下記の表示させる方法をご紹介します。

HTML

    <p>
      <img src="cat.png" alt="［写真］"> 通常の大きさ
    </p>
      <p>
        <img src="cat.png" alt="［写真］" class="example1"> 80pxに縮小
      </p>
    <p>
      <img src="cat.png" alt="［写真］" class="example2"> 画面サイズに対して横幅50%表記
    </p>
    <p>
      <img src="cat.png" alt="［写真］" class="example3"> 画面サイズに対して横幅10%表記
    </p>
    <p>
      <img src="cat.png" alt="［写真］" class="example4"> 画面サイズの幅に対して20%高さ50px表示
    </p>

CSS

.example1{
  width: 80px;/*80pxに画像の縮小*/
}
.example2{
  width: 50%;/*画像幅に対して50%表示*/
}
.example3{
  width: 10%;/*画像幅に対して10%表示*/
}
.example4{
  width: 20%;/*画像幅に対して20%高さ50px表示*/
  height: 50px;
}