動的サイズのコンテナ内で画像を垂直方向に配置するにはどうすればよいですか?

動的高さコンテナ内の画像の垂直方向の配置

問題: 高さが異なる応答性のコンテナ内で画像を垂直方向に配置するにはどうすればよいですか?に基づいてブラウザによって決定されます。幅?

解決策:

1.垂直方向の配置にインライン要素を使用する:

親要素内でインライン要素を垂直方向に配置するには、最初の子としてブロック レベルの (擬似) 要素を作成し、その高さを親の 100% に設定します。 。さらに、vertical-align: middle を擬似要素とターゲット画像要素に適用します。

2.利点:

• 動的なコンテナの寸法がサポートされています。
• 画像の寸法を明示的に指定する必要はありません。
• インライン または div 要素を垂直方向に配置 (フォントをリセットするオプションあり)コンテンツを表示するための div 要素のサイズ。

3.画像を垂直に配置したレスポンシブ コンテナ:

幅に合わせた高さのレスポンシブ コンテナを作成するには、

padding-top プロパティにパーセント値を使用します。

4.レスポンシブ コンテナへのコンテンツの追加:

レスポンシブ コンテナ内でラッパー要素を使用して、コンテンツを格納します。ラッパーを完全に配置し、コンテナのスペースを満たすように展開します。

HTML コード:

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="image.jpg" alt="">
    </div>
</div>

垂直方向の配置用の CSS コード:

.img-container {
    text-align: center;
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

レスポンシブ用の CSS コードコンテナ:

以上が動的サイズのコンテナ内で画像を垂直方向に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。