CSSバナー画像をレスポンシブかつ中央に表示する方法について

今回はCSSバナー画像をレスポンシブセンター表示する方法を中心に紹介しますので、参考にさせていただきます。編集者をフォローして見てみましょう

PC ウェブサイトのトップページでは、バナー画像はウェブページ上の最大の画像であり、ウェブページの主要な情報を伝えるだけでなく、すべての人の注目を集めます。表示方法はユーザー エクスペリエンスに直接影響します。今日は、さまざまなサイズのビューポートでバナー画像を中央に表示する方法について説明します。

;属性はありますが、ウィンドウを引き伸ばすプロセス中に、画像が引き伸ばされてひどくなることが多いため、画像を分離して画像の両側を非表示にして、さまざまなサイズのバナー画像を中央に配置するという目的を達成できます

background-size: coverHTMLの構造は次のとおりです

<p class="banner">
    ![](img/banner.jpg)
</p>

CSS スタイルは次のとおりです

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 -355px;
    vertical-align: middle;
}

ビューポートの幅と画像の幅が 1920 px と同じ場合、ニアン ケーキはビューのちょうど中心にあり、ページは効果は以下のとおりです

width:1920px

ビューポートの幅が1210pxの場合でも、下の図に示すように、ニアンケーキはビューの中央に表示されます

width:1210px

この記事はここで終わります。ソースコードはGitHubに送信しました。バナーレスポンス中心ですので、必要な方はご自身でダウンロードしてください

ファイルの終わり

文章に誤りや不正確さが出るのは避けられません。より多くの人に誤解を与えないように、皆さんが私を修正してくれることを願っています。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSSボックスモデルの例

CSSで負のマージン値を使用して中央位置を調整する方法

画像の周囲にテキストを折り返す効果を実現するCSS

以上がCSSバナー画像をレスポンシブかつ中央に表示する方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。