imgタグで、width 属性を設定しても画像の表示幅が反映されない現象を紹介します。
CSSのwidthプロパティがautoに設定されている場合、imgタグのwidth属性に値を設定しても画像の表示幅に反映されないです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ImageWidthConflict.css" />
</head>
<body>
<h2>imgタグのwidth属性の動作確認</h2>
<img src="sample.png" />
<hr />
<img width="600" src="sample.png" />
<hr />
<img class="TestImage" width="400" src="sample.png" />
</body>
</html>
.TestImage {
width: auto;
}
画像は下図を利用します。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
1つ目の画像は何も指定していないため、画像のサイズがそのまま表示されます。
2つ目の画像は、imgタグのwidth属性に 600 を指定しており、横幅600ピクセルで表示されます。
3つ目の画像も、imgタグのwidth属性に 400 が指定されていますが、Webブラウザの表示では、横幅400ピクセルでは表示されず、画像の元のサイズのまま表示されています。
imgタグのクラスでTsetImageが設定されており、TestImageクラスのスタイルシートで、width:auto; が指定されているため、imgタグのwidth属性の値が反映されない状態に
なっています。
CSSのwidth:autoを除去します。またはimgタグのwidth属性ではなく、CSSのwidthプロパティ、またはstyle属性で画像の表示幅を設定します。
以下のHTML、CSSのコードに変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ImageWidthConflict.css" />
</head>
<body>
<h2>imgタグのwidth属性の動作確認</h2>
<img src="sample.png" />
<hr />
<img width="600" src="sample.png" />
<hr />
<img class="TestImage1" width="400" src="sample.png" />
<hr />
<img class="TestImage2" src="sample.png" />
<hr />
<img style="width:240px" src="sample.png" />
</body>
</html>
.TestImage1{
}
.TestImage2 {
width:300px;
}
1つめ、2つめのimgタグは先ほどのコードと同様です。
3つ目のimgタグは、TestImage1 クラスが指定されていますが、スタイルシートでは、TestImage1クラスには width:auto; の指定はありません。
また、4つ目のimgタグは、width 属性の指定をしない代わりに、TestImage2 クラスで、width:300px; の指定を追加し幅を指定しています。
5つ目のimgタグは、style属性で直接スタイルをimgタグに設定しています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
imgタグやCSSで設定した通りの幅で画像が表示されています。
