【超初心者】CSSで画像の拡大縮小ができない！（サイズが変わらない）

CSSで画像の拡大縮小ができない原因

• 変な指定をしているので、縦横比が変わってしまう。
• スマホで見ると、変な大きさになってしまう。

CSSで画像のサイズを指定する方法

CSS

img.size {
	max-width: 100%;
	width: 800px;
}

「max-width: 100%;」があると、「width」で指定した画面よりも小さな時に、最大表示してくれます。つまり、スマホで見た時には、スマホの横幅いっぱいになります。

「800」というのは、自由に変更してください。

HTML

<div align="center"><img src="（ファイルの場所）/（ファイル名）" alt="" class="size"></div>

「align="center"」は、中央寄せをする場合です。

「class="size"」で、上記のCSSを指定しています。

CSSで画像の拡大縮小ができない場合の対処方法

不要な指定

CSSファイルやhtmlファイルのどこかで、画像の大きさの指定をしていると、それが、悪さをすることがあります。

その場合には、不要と思われるものを削除しましょう。

豆知識

• CSSの指定がうまくいかない場合には、もっと根本的なところの指定が、影響していることがあります。「body」のところなどに、よく分からずに書いている部分があったら、削除してみましょう。
• 色々指定すればするほど、スマホなどで見た時にうまくいきません。

免責事項・著作権表示