Web ページに画像バナーを実装する方法について、誰がアドバイスをくれますか? _html/css_WEB-ITnose

カルーセル バナーなど、Web サイトで多くのバナー効果をよく見かけますが、単一の画像の幅が 1920px の場合に、画像を Web ページとバナーの中央に配置するにはどうすればよいですか? ? Web ページの幅は 960px、画像の幅は 1920px であると想定されます。
あなたのアイデアを説明するか、コード例を書いてください。ありがとう。

図に示すように:

ディスカッション (解決策) への返信

本体の幅を制限せず、各モジュールで対応する幅を設定します。 ,

また、解像度が非常に高いファイルや非常に大きなファイルを使用することは、読み込み速度が遅いなどの問題が発生するため、推奨されません。

本体の幅を制限せず、各モジュールで対応する幅を設定します。 ,

また、解像度が非常に高いファイルや非常に大きなファイルを使用することは、読み込み速度が遅いなどの問題が発生するため、推奨されません。

このような状況が起こることはほとんどありません。通常、Web サイトのフレームワークが最初に設定されている場合、このような状況は予測できません。コードはどのようにして図の効果を実現しているのでしょうか？詳しく説明していただけますか?

本体の幅を制限せず、対応する幅を各モジュールに設定します。 ,

また、解像度が非常に高いファイルや非常に大きなファイルを使用することは、読み込み速度が遅いなどの問題が発生するため、推奨されません。

このような状況は通常、最初に設定されている Web サイトに一時的な変更があった場合、このような状況は予測できません。コードはどのようにして図の効果を実現するのでしょうか?詳しく説明していただけますか?

カルーセルの画像は通常、幅と高さが同じです。前述の効果については、dnspod.cn を参照してください。そのカルーセルでは、中央の画像が固定されており、残りは背景色です。

コードで達成される効果:
私はサンプル効果を最適化するのが面倒なので、これはおそらくこれを意味します。 ( 1920 の画像 デザインもユニバーサル解像度に合わせて慎重に設計する必要があります。1920 解像度より小さい場合、中央部分で表現する必要がある画像コンテンツはすべて 1200 程度のサイズでデザインするのが最善です。表現したいものは中央に、それ以外の部分は非表示にします。 1920 より大きい場合は、解像度が 4000 に達しても、色で塗りつぶされますので、要件は満たされます。

aaaaa 960>

bbbb