ボディマージンがあるときにアスペクト比を維持するDivをセンタリング

このCSSの課題には、特定の特性を備えたDIVの作成、垂直および水平のセンタリング、マージンでのビューポートスケーリング、固定アスペクト比の維持、およびすべてJavaScriptなし。いくつかのソリューションが提示されています：

Andrew Welchが説明したように、課題には次のことが必要です。

• センタリング：垂直と水平の両方。
• スケーリング： divは、マージンを維持しながら、ビューポートに合うようにサイズを変更する必要があります。
• アスペクト比：任意のアスペクト比を保存する必要があります。
• JavaScriptなし：ソリューションはCSSのみを使用する必要があります。

数人の開発者が以下を含むソリューションを提供しました。

• Mark Huot：直接幅/高さとアスペクト比の計算を使用して、マージンを決定します。
• Amelia Wattenberger＆Eric A. Meyer：高さ/幅と最大/最大/最大幅に使用されたビューポートユニット（VH/VW）を使用し、 translate （Amelia）またはFlexbox（Eric）を中心にしています。
• Brian Hart＆BenoîtRouleau：アスペクト比のサイジングでvminユニットを使用し、FlexBoxを中心にしました。 Benoîtは、マージン調整にcalc()を使用しました。
• Jonathan Melville：主にTailwind CSSクラスを使用してソリューションを提示しました。

Andrew Welchは最終的にvminユニットを使用したソリューションを支持しましたが、マージン減算にcalc()を使用することは不要である可能性があることを認めています。さまざまなアプローチは、このレイアウトの問題に取り組む際のCSSの柔軟性を強調しています。

以上がボディマージンがあるときにアスペクト比を維持するDivをセンタリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。