imgのwidthが効かない･画像を縮小できない原因7選

「画像の大きさを指定したいのに大きさが変わらない!?なんで!?どうすればいいの!?」

わかります。私もよく画像サイズが変わらず困っていました。

でも大丈夫です。私が前に画像サイズが変わらなかったことを思い出し、原因と解決方法をお教えします。

CSSやhtmlでimgのwidthが効かない･画像のサイズが変わらない原因と解決方法を7つ紹介します。

画像を縮小できないのはwidthが効いていないということですので画像を縮小できなくて困っているかたも見ていってください。

img以外が原因の可能性もあるため下記記事も参考にしてください。

【原因1】html属性widthに効かない単位を含めている

<img src="https://csshtml.work/wp-content/uploads/1.jpg" width="3em" alt="" >

html属性のwidthに単位はいりません。

単位がない状態ではpxとして解釈されます。

一応「px」と「%」の単位は効きます。

しかし「em」や「vw」は効きません。

【解決方法】CSSで単位付き指定

<style>
.example{
    width: 3em;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

emやvwなどの単位で指定したいならCSSでwidthを指定しましょう。

【原因2】CSSのwidthに単位の指定がない

<style>
.example{
    width: 200;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

htmlのwidth属性ではpxなどの単位をつけませんが、CSSのwidthでは単位の指定が必須です。

【解決方法】pxなどの単位をつける

<style>
.example{
    width: 200px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example">

単純にCSSのwidthに単位を指定しましょう。

【原因3】html属性よりCSSが優先されるから

<style>
.example{
    width: 200px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" width="50" alt="" class="example">

上記の例ではCSSで「width:200px」が指定されているのにhtmlでは「width="50"」が指定されており矛盾しています。

この場合html属性である「width="50"」よりCSSの「width: 200px」が優先されます。

【解決方法】CSSのwidthを調整する

優先される方であるCSSのwidthを調整しましょう。

もちろんCSSのwidthを削除してhtml属性のwidthを優先させる方法もあります。

しかしhtml5からhtml属性よりCSSで調整することが推奨されています。

【原因4】CSSよりstyle属性が優先されるから

<style>
.example2{
    width: 50px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" style="width: 200px" alt="" class="example2">

上記の例ではCSSで「width:50px」が指定されているのにhtmlのstyle属性内で「width: 200px」が指定されており矛盾しています。

この場合CSSの「width: 50px」よりhtmlのstyle属性内の「width: 200px」が優先されます。

CMSによっては自動でstyle属性にwidthが指定さていることがあります。

【解決方法】style属性を削除するか!importantを指定する

<style>
.example3{
    width: 50px;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example3">

style属性を削除しCSSで指定しましょう。

style属性で指定するよりCSSで指定するほうが一般的です。

style属性を削除するのが困難な場合はCSSのwidthに「!important」をつけて上書きしてしまいしょう。

<style>
.example3{
    width: 50px !important;
}
</style>
<img src="https://csshtml.work/wp-content/uploads/1.jpg" style="width: 200px" alt="" class="example3">

【原因5】min-widthまたはmax-widthが指定されているから

<style>
.example4 img{
    max-width: 50px;
}
.example5{
    width: 200px;
}
</style>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example5">
</div>

min-widthは要素の最小幅を、max-widthは最大幅を指定するCSSです。widthはこの範囲内で指定することができ、それを超える場合は最小幅、最大幅で止まります。

上記の例ではmax-widthが50px、つまり50pxは超えられない設定になっているのにwidth:200pxを指定しています。この場合、幅は50pxになります。

【解決方法】max-width、min-widthを直すか上書き

<style>
.example4 img{
    max-width: 50px;
}
.example4 .example5{
    /*コレ*/max-width: none;
    width: 200px;
}
</style>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="" class="example5">
</div>

widthに!importantをつけてもmax-widthを超えることはできません。

max-width、min-widthを直すか上書きする必要があります。

max-width、min-widthの初期値は「none」です。「auto」ではありません。

【原因6】CMSによる仕様だから

CMSによっては画像の右下をマウスでひっぱるだけで画像サイズを変更できるものもあります。

逆に言えばCMSにとってはマウスでひっぱっても画像サイズを変更できないものもあります。

同じCMSでもバージョンやプラグインの有無により異なります。

「あのホームページではできたのに、こっちのホームページではできないぞ？」

というときは要チェックです。

【解決方法】CMSによる

これはCMSによるため明確な解決方法を挙げるのは難しいです。

バージョンアップで画像拡縮機能が付くものもあればプラグインで入れるものもあるかもしれません。

あるいは機能はすでにあり、方法が違うかもしれません。

調べてみてください。

【原因7】スペルミス、記載ミス

CSSやhtml初心者にありがちなのがスペルミスや記載ミスです。

下記を確認してミスがないか探してください。

↓htmlソースが間違っていないか確認する方法

↓CSSで間違えやすいポイント解説

↓CSSで間違っている箇所の確認方法

↓calcを使っている場合は下記もチェックしてください。

【まとめ】画像のサイズが変わらない原因

1. html属性widthにemなど効かない単位を含めている
   →CSSで指定する
2. CSSのwidthに単位の指定がない
   →pxなどの単位をつける
3. html属性よりCSSが優先されるから
   →CSSのwidthを調整する
4. CSSよりstyle属性が優先されるから
   →style属性を削除するか!importantを指定する
5. min-widthまたはmax-widthが指定されているから
   →max-width、min-widthを直すか上書き
6. CMSによる仕様だから
   →CMSごとに要調査
7. スペルミス、記載ミス
   →要チェック

以上、CSSやhtmlでimgのwidthが効かない･画像のサイズが変わらない原因と解決方法でした。