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

開発
1

こんにちは。公式テーマコンポーネントをインストールしました: https://meta.discourse.org/t/search-banner/122939。これは役立ちます。ただ一つ気になることがあります。検索バナーの背景画像として画像をアップロードしましたが、画面が狭くなると右側が切り取られるように調整されるようです。どう説明すればいいか分かりませんが、以下にいくつかの画像を示します。

うまく表示されている状態。

image
image2674×492 125 KB

画像がテキストを覆っている状態。

image
image1612×382 78.2 KB

そして、Wyze の検索バナーは、画像が両側から調整され、テキストを覆わないので良いと思います。

このコンポーネントは、画像がさまざまなデバイスに合わせて調整されるように改善できますか？よろしくお願いします!!

「いいね！」 4
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