신체 마진이있을 때 종횡비를 유지하는 DIV 중심

이 CSS 챌린지에는 수직 및 수평 센터링, 마진이있는 뷰포트 스케일링, 고정 종횡비 유지 및 JavaScript가없는 특정 특성이있는 DIV를 생성하는 것이 포함됩니다. 몇 가지 솔루션이 제시됩니다.

Andrew Welch가 설명한 바와 같이 도전은 다음과 같습니다.

• 센터링 : 수직 및 수평으로.
• 스케일링 : DIV는 마진을 유지하면서 뷰포트에 맞게 크기를 조정해야합니다.
• 종횡비 : 임의의 종횡비는 보존되어야합니다.
• JavaScript 없음 : 솔루션은 CSS 만 사용해야합니다.

몇몇 개발자는 다음을 포함한 솔루션을 제공했습니다.

• Mark Huot : 직접 폭/높이 및 종횡비 계산을 사용하여 마진을 결정합니다.
• Amelia Wattenberger & Eric A. Meyer : 높이/너비 및 Max-Height/Max width에 대한 뷰포트 유닛 (VH/VW), translate (Amelia) 또는 Flexbox (ERIC)를 사용합니다.
• Brian Hart & Benoît Rouleau : 종횡비 크기 조정에 vmin 장치를 활용하고 Flexbox를 중심으로합니다. Benoît는 마진 조정에 calc() 사용했습니다.
• Jonathan Melville : 주로 Tailwind CSS 클래스를 사용하는 솔루션을 발표했습니다.

Andrew Welch는 궁극적으로 vmin 장치를 사용하여 솔루션을 선호했지만 마진 뺄셈에 calc() 를 사용하는 것은 불필요하다는 것을 인정합니다. 다양한 접근법은이 레이아웃 문제를 해결할 때 CSS의 유연성을 강조합니다.

위 내용은 신체 마진이있을 때 종횡비를 유지하는 DIV 중심의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!