テーマはdawnを使用しており、TOPに画像バナーで貼り付けた時、ページの横幅に応じて画像が切れてしまいます。
これをどの横幅でも画像はきれずに全て表示する形にしたいのですが、どうすれば良いでしょうか？
どうかご教授いただけますと幸いです。
お手数おかけしますが、よろしくお願いいたします。
Topic summary
Dawnテーマを使用したトップページの画像バナーが、画面の横幅に応じて切れてしまう問題について質問が投稿されました。
問題の詳細:
- 画像バナーがページの横幅に応じて一部が表示されない
- どの横幅でも画像全体を表示したい
回答内容:
- スマホとPCでは表示領域の比率が異なるため、画像が見切れるのは一般的な現象
- 対応方法として以下が提案されました:
- 画像を横に引き延ばして表示
- 同じ比率で表示(余白が生じる)
- PC用とスマホ用で2種類の画像を用意
解決状況:
質問者は自力で解決に成功。CSSを使用して縦横を一定に保ちながら全体を表示し、拡大縮小を無事に実装できたと報告しています。
こんにちは！
例えばスマホ画面では良い感じに見えている画像がPC画面だと見切れてしまう、というのはよくある話ですが、これは表示領域の比率が違うのである意味当然ですよね！
正方形の画像を横長の表示領域に表示させようとすると、
- 画像が横に引き延ばされて表示される
- 今回のように横は揃うが上下が見切れる
のどちらかになるかと思います。
なので、よくあるのは「PC画像とスマホ画像の2種類を用意して、端末によって出し分ける」とか「PC画面のときでも同じ比率で画像を表示させる(余白が生まれる)」というやり方ですが、質問者様がどのような表示方法を想定しているかによって回答が変わると思います！
ご確認ありがとうございます！
こちらですが、自力で解決することが出来ました。
上記の画像は縦幅の表示範囲が決まっていて横幅に応じて表示範囲が変わってましたが、全体を表示しながら縦横を常に一定にして拡大縮小するCSSを無事作ることが出来ました。
ぜひ次回困った際はよろしくお願いします！
1 Like