Dawn 画像バナー 最大幅と最小幅の指定方法

日本語 ディスカッション 技術的なQ＆A
1

Dawnテーマを用いてストアを構築しております。

画像バナーについて、

画像をウインドウ幅に合わせて表示したいと考えておりますが、

極端に大きくなったり極端に小さくなったりするのは避けたいです。

修正するliquidファイルは image.banner.liquid と想定しておりますが、

画像を自動で拡大縮小させたいが、最大幅と最小幅を指定しておきたい場合、

どのようにコードを修正すべきか、教えていただけますでしょうか。

2

十分に検証していませんので、

うまくいかない場合は申し訳ございません。

アセット(assets)の

section-image-banner.css

を編集します。

おそらくモバイル表示の際には、

最小幅や最大幅の設定は必要ないと思いますので、

下記のようにします。

お使いのDawnのバージョンによりますが、79行目付近に下記のような記述はないでしょうか？

.banner--large:not(.banner--adapt) {
    min-height: 72rem;
  }

これを下記のようにします。

.banner--large:not(.banner--adapt) {
    min-height: 72rem;
    max-width: 1800px;
    min-width: 1000px;
    margin: 0 auto;
  }

max-widthが最大幅

min-widthが最小幅

ですので、

ご希望の数値にご変更ください。

ご参考まで。

(キュー田辺)

3

ご回答ありがとうございます。

頂いた方法ではないですが、section-image-banner.css の66行目の下記部分

@media screen and (min-width: 750px) {
  .banner {
    flex-direction: row;
  }

にて数値でmax,minを指定することで、求めていた仕様に変更できました。

修正方法のヒントになりました。ありがとうございました。