css - 背景画像を含むレスポンシブ レイアウトを記述する方法

Question

これと同様です。背景画像のあるコンポーネントを作成したいのですが、背景画像のサイズを 100% にすることはできません。その場合、中央にコンテンツが必要です。左側に画像、右側にテキストが必要です。レスポンシブにする方法

Answer 1

試してみるbackground-size: cover;

Answer 2

background-size と組み合わせて使用​​する、background-position を試してみましたか?

Answer 3

Apple のページのいくつかは、背景画像を使用しており、アダプティブです。もちろん、レイアウトも比較的シンプルです。その原理はCSS3 Media Queryです。

私は通常 2 つのソリューションを使用します:

• 12列グリッドレイアウトシステム(幅、フロート、シーケンシャルレスポンス);

メディアクエリの適応 (
• レイアウト、フォントサイズ、適応されたフロー節約画像を使用);

  position 属性或 flexコンポーネント開発の場合でも、

  インラインパラメータ
を定義することができ、コンポーネントは内部でレイアウトスタイルを決定します(いくつかのレイアウトがプリセットされています)。

背景画像の場合、

属性を使用して適応型画像表示 (自動入力) を実装したり、メディア クエリを使用してさまざまなデバイスで異なる表示を指定したりできます (例: デスクトップ画像は高さよりも幅が広く、モバイル画像は高さよりも幅が広い)垂直画面の画像は幅よりも高さが大きい) ) 画像 (トラフィックを節約)。 props 私はこう思います: デザイナーが十分な画像適応サイズと計画を提供しない限り、コンテンツ レイアウトの一部として背景を使用しないようにしてください。