FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

画像バナーで画像が切れてしまう件について

画像バナーで画像が切れてしまう件について

556
遊覧客
16 0 3

テーマはdawnを使用しており、TOPに画像バナーで貼り付けた時、ページの横幅に応じて画像が切れてしまいます。

これをどの横幅でも画像はきれずに全て表示する形にしたいのですが、どうすれば良いでしょうか?

 

どうかご教授いただけますと幸いです。

お手数おかけしますが、よろしくお願いいたします。

 

スクリーンショット 2024-10-12 16.13.20.png

2件の返信2

wugk_
Shopify Partner
12 5 3

こんにちは!

 

例えばスマホ画面では良い感じに見えている画像がPC画面だと見切れてしまう、というのはよくある話ですが、これは表示領域の比率が違うのである意味当然ですよね!

正方形の画像を横長の表示領域に表示させようとすると、

  1. 画像が横に引き延ばされて表示される
  2. 今回のように横は揃うが上下が見切れる

のどちらかになるかと思います。

 

なので、よくあるのは「PC画像とスマホ画像の2種類を用意して、端末によって出し分ける」とか「PC画面のときでも同じ比率で画像を表示させる(余白が生まれる)」というやり方ですが、質問者様がどのような表示方法を想定しているかによって回答が変わると思います!

Shopify開発は楽しいからやってます。何かあればX(@wugk_)まで。
takemaru
訪問者
1 0 1

ご確認ありがとうございます!
こちらですが、自力で解決することが出来ました。
上記の画像は縦幅の表示範囲が決まっていて横幅に応じて表示範囲が変わってましたが、全体を表示しながら縦横を常に一定にして拡大縮小するCSSを無事作ることが出来ました。

ぜひ次回困った際はよろしくお願いします!