Liquid、JavaScriptなどに関する質問
テーマはdawnを使用しており、TOPに画像バナーで貼り付けた時、ページの横幅に応じて画像が切れてしまいます。
これをどの横幅でも画像はきれずに全て表示する形にしたいのですが、どうすれば良いでしょうか?
どうかご教授いただけますと幸いです。
お手数おかけしますが、よろしくお願いいたします。
こんにちは!
例えばスマホ画面では良い感じに見えている画像がPC画面だと見切れてしまう、というのはよくある話ですが、これは表示領域の比率が違うのである意味当然ですよね!
正方形の画像を横長の表示領域に表示させようとすると、
のどちらかになるかと思います。
なので、よくあるのは「PC画像とスマホ画像の2種類を用意して、端末によって出し分ける」とか「PC画面のときでも同じ比率で画像を表示させる(余白が生まれる)」というやり方ですが、質問者様がどのような表示方法を想定しているかによって回答が変わると思います!
ご確認ありがとうございます!
こちらですが、自力で解決することが出来ました。
上記の画像は縦幅の表示範囲が決まっていて横幅に応じて表示範囲が変わってましたが、全体を表示しながら縦横を常に一定にして拡大縮小するCSSを無事作ることが出来ました。
ぜひ次回困った際はよろしくお願いします!