コアwebバイタルの対策のために、画像の width height を固定するとスマホの時に形が崩れてしまいます

Question

コアwebバイタルの対策のために、

画像のサイズに　width とheight を指定する施策を行っています。

<img src="https://ドメイン.com/wp-content/themes/keni80_wp_standard_all_202106241914/images/logo.png" alt="ヘッダーロゴ" width="350" height="75">

レスポンシブ時
css

.site-title img{ height:40px; padding-bottom:5px;}

このようにするとスマホサイズに狭めた時

このようにレイアウトが崩れてしまいます。

どうすれば、　img タグに　height と　width を指定しても

画像の大きさが崩れないようにできるのでしょうか？

テスト環境URL

Answer 1

どうすれば、　img タグに　height と　width を指定しても画像の大きさが崩れないようにできるのでしょうか？

モバイルにした際も幅と高さの両方を指定しましょう。高さだけ指定した場合、幅はそのままとなります。

Comments

[maisumakun]

幅を画面幅100%にするなら、高さにもvwを使うことで縦横比を一定に保つ、という方法が考えられます。

[niconic73027793]

CSSでは
画像の　imgに max-width:100%; 　height:auto；　の指定をしてありますが、
html には直接
width="350" height="75"
と指定していて、
スマホの時のサイズも　htmlに記載する方法があるのでしょうか？

<picture>
<source type="image/webp" srcset="hoge_sp.webp" media="(max-width: 600px)" width="300" height="150">
<source type="image/webp" srcset="hoge_pc.webp" width="1200" height="800">
<img src="hoge_pc.jpg" alt="" width="1200" height="800">
</picture>

のように画像を２枚用意して、スマホとPC両方サイズ指定するとなると　すごい工数がかりますね。

[maisumakun]

> スマホの時のサイズも　htmlに記載する方法があるのでしょうか？

CSSでサイズを指定している場合、<img>のwidthやheightは無関係です。

[maisumakun]

> 画像の　imgに max-width:100%; 　height:auto；　の指定をしてありますが、

この指定が良くない、ということです。

[niconic73027793]

サイト全体設定の画像に　img {max-width:100%; height:auto;}
いらないんですね。
ほとんどのコアウェブバイタル対応について書いてあるサイトは
画像に　width height を設定して、　CSSにはmax-widthと　heightの設定をすると書いてあって
そのままやったらスマホで画像が崩れてしまっったので困っています。

[niconic73027793]

CSSで指定すれば、　htmlに指定してもCSSの記述が優先されて、

.sample img {
max-width: 100%;
width: 200px;
　height:30px;
}

/* 画面幅が800px以上のとき */
@media only screen and (min-width: 800px) {
.sample img {
width: 400px;
heihgt :200px;
}
}
のようにしている感じでよいのでしょうか？

[maisumakun]

> CSSで指定すれば、　htmlに指定してもCSSの記述が優先されて

そのとおりです。常にCSSでwidthやheightが指定されている状況であれば、<img>のwidthやheightはまったく意味を持ちません。

（それとは別件ですが、この例のようにモバイル（200x30）とPC（400x200）で縦横比が違うような指定をすれば、当然そのとおりに表示されます）