検索バナー画像が小さい画面で切り取られる

開発
2

デフォルトでは、コンポーネントは単一の背景画像を異なるデバイスに適合するように調整する方法を処理します。背景画像は、CSS で background-size: cover を使用して設定されます (詳細はこちら: background-size - CSS | MDN)。

したがって、デフォルトでは、背景画像はコンテナの背景全体を常にカバーするようにリサイズされます。

1 つの改善策として、このコンポーネントに代替のモバイル画像を追加することが考えられますが、それでも個々のサイトでは、特定の背景画像の要件がある場合に特定の画面幅で CSS を追加する必要がある可能性が高いです (この問題はモバイルよりも広い幅で発生しているため、この場合は役立ちません)。Wyze の場合、特定のニーズをサポートするためにコンポーネントのカスタマイズされたバージョンがインストールされています。

CSS 変更の具体的な方法については、次のようなものが、このケースで背景画像の動作を改善する可能性があります。

.search-banner .custom-search-banner-wrap {
   background-size: contain;
}

また、異なる幅で異なる動作を設定する必要がある場合もあります。たとえば、次のようになります。

.search-banner .custom-search-banner-wrap {
  background-size: contain;
  @media screen and (max-width: 1000px) { // 画面の幅が 1000px 未満の場合
   background: none; // 背景を非表示にする
  }
}

これに慣れていない場合は、次のガイドが役立つかもしれません: Making custom CSS changes on your site

「いいね！」 6