レシポンシブ、画像縮小について

Question

###前提・実現したいこと
ワードプレスレシポンシブ対応テーマを使用しておりますが、スマホで表示すると画像が縮小されず、両端がカットされます。縮小するため

img {
max-width: 100%;
height:auto;
}

を入れろとのことですが、style.cssの最後に挿入しても反映されません。
初歩的なことですみませんが、スマホで画像が縮小する方法を教えてください。

追記
ダッシュボードの新規追加から、テーマ　Proper Lite　をダウンロードしました。

カスタマイズのHome Hero Options→バックグランドイメージに画像を挿入するとフルスクリーンで表示されるのですが、スマホで見ると両端がカットされて表示されます。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[kei344]

WordPressテーマはテーマ名と取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

[zeroconsul]

ダッシュボードの新規追加から、テーマ　Proper Lite　をダウンロードしました

[zeroconsul]

カスタマイズのHome Hero Options→バックグランドイメージに画像を挿入するとフルスクリーンで表示されるのですが、スマホで見ると両端がカットされて表示されます。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

[zeroconsul]

ありがとうございます

Answer 1

画像が縮小されず、両端がカットされます

このテーマはそういうテーマです。画像のサイズについてはJavaScriptで処理されているので、たとえCSSで上書きしても望む挙動にはならないと思います。

また、両端を切って縦画面でも全画面表示する手法はさいきん流行っているのか多くのテーマが採用しています。それに合うような画像を使うのが手早いとは思います。

【Proper Lite — 無料の WordPress テーマ】
https://ja.wordpress.org/themes/proper-lite/

【Proper Lite - Modern Themes】
https://modernthemes.net/wordpress-themes/proper-lite/

Comments

[zeroconsul]

ありがとうございました。
本当に困っていたので、簡潔なご回答、勉強になりました。