高さとアスペクト比を維持しながら、親 Div 内の画像を中央に配置するにはどうすればよいですか?

親 Div 内で画像要素を中央に配置する

親 Div 内で画像を中央に配置するには、特定の CSS テクニックが必要です。これを実現する方法は次のとおりです:

問題:

幅を伸ばさずに高さ (100%) を維持したまま、親 div の中央に画像を配置する方法?

例:

質問で提供されている HTML と CSS を検討してください:

<code class="html"><div class="box">
  <img src='featured.jpg' />
</div></code>

<code class="css">.box {
  height: 100%;
  width: 450px;
  border: 2px solid red;
  background: green;
  overflow: hidden;
}
.box img {
  height: 100%;
  width: auto;
  text-align: center;
}</code>

解決策:

画像を中央に配置するには、text-align: center; を追加します。子画像要素ではなく親 div への CSS 宣言:

<code class="css">.box {
  /* ... */
  text-align: center;  /* Align center all inline elements */
}</code>

これにより、画像を含むすべてのインライン要素が div 内の中央に配置されます。

追加の機能強化:

インライン要素の行の高さが確保されているため、画像の下に隙間が生じる場合があります。このギャップを削除するには、vertical-align:bottom; を追加します。画像 CSS へ:

<code class="css">.box img {
  /* ... */
  vertical-align: bottom;  /* Fix the vertical gap */
}</code>

以上が高さとアスペクト比を維持しながら、親 Div 内の画像を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。