종횡비와 센터링을 사용하여 반응형 정사각형 Div를 만드는 방법은 무엇입니까?

뷰포트 크기에 따른 종횡비 유지

뷰포트 너비와 높이에 따라 종횡비를 유지하는 반응형 정사각형 div를 얻으려면 다음을 활용하세요. CSS의 가로 세로 비율 속성.

요구 사항:

• 순수 CSS
• Square는 방향에 관계없이 뷰포트의 최소 치수에 적응합니다
• 뷰포트 내 수평 및 수직 중앙 정렬

종횡비 솔루션

종횡비 속성을 사용하면 원하는 종횡비를 지정할 수 있습니다. 기본적으로 이 속성은 너비를 기준으로 높이를 설정합니다. 따라서 가로세로 비율이 1/1이면 정사각형이 생성됩니다.

<code class="css">.square {
  aspect-ratio: 1 / 1;
  background: orange;
}</code>

뷰포트 크기에 맞게 조정

정사각형 div가 뷰포트의 최소 크기에 맞게 조정되도록 하려면:

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

세로 및 가로 가운데 맞추기

사각형을 가운데로 맞추려면 세로 및 가로 모두에서 여백을 자동으로 설정해야 합니다.

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

예

<code class="html"><div class="square">Aspect ratio 1:1</div></code>

결론

종횡비를 사용하면 종횡비를 유지하고 뷰포트 중앙에 위치하는 반응형 정사각형 div를 만들 수 있습니다. 뷰포트 크기나 방향에 관계없이 일관된 시각적 경험을 제공합니다.

위 내용은 종횡비와 센터링을 사용하여 반응형 정사각형 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!