Liquid、JavaScriptなどに関する質問
テーマはdawnを使用しており、TOPに画像バナーで貼り付けた時、ページの横幅に応じて画像が切れてしまいます。
これをどの横幅でも画像はきれずに全て表示する形にしたいのですが、どうすれば良いでしょうか?
どうかご教授いただけますと幸いです。
お手数おかけしますが、よろしくお願いいたします。
こんにちは!
例えばスマホ画面では良い感じに見えている画像がPC画面だと見切れてしまう、というのはよくある話ですが、これは表示領域の比率が違うのである意味当然ですよね!
正方形の画像を横長の表示領域に表示させようとすると、
のどちらかになるかと思います。
なので、よくあるのは「PC画像とスマホ画像の2種類を用意して、端末によって出し分ける」とか「PC画面のときでも同じ比率で画像を表示させる(余白が生まれる)」というやり方ですが、質問者様がどのような表示方法を想定しているかによって回答が変わると思います!
ご確認ありがとうございます!
こちらですが、自力で解決することが出来ました。
上記の画像は縦幅の表示範囲が決まっていて横幅に応じて表示範囲が変わってましたが、全体を表示しながら縦横を常に一定にして拡大縮小するCSSを無事作ることが出来ました。
ぜひ次回困った際はよろしくお願いします!
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025