CSS を使用して、特大の画像を Div 内の中央に配置するにはどうすればよいですか?

CSS を使用した Div 内の特大画像の中央揃え

div 幅が変化する流動的なレイアウトを操作する場合、div 内で特大画像を中央揃えにするのは困難な場合があります。画像は左端から始まり、中心から右にずれたままになる場合があります。

この問題に対処するために、画像を効果的に中央に配置し、両端に均等なオーバーフロー カットオフを作成する CSS ソリューションを提案します。

<code class="css">.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}</code>

親 div は相対的な位置を確立し、オーバーフローを含みます。画像を含む子 div には、上、下、左、右の値が極度に負の絶対位置が設定されています。これらの負の値は、画像を div の可視領域を超えて事実上押し出します。 margin: auto プロパティは、親 div 内で画像を自動的にセンタリングします。

この技術により、画像は元のアスペクト比を維持できるため、画像の品質を損なう可能性のあるブラウザによるサイズ変更の問題が排除されます。結果は、両側が均等にトリミングされたオーバーフローを備えた中央に大きな画像が表示されます。

以上がCSS を使用して、特大の画像を Div 内の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。