질문과 답변 형식에 초점을 맞춘 몇 가지 잠재적인 기사 제목은 다음과 같습니다. * 뷰포트에서 종횡비와 중심을 유지하는 동적 크기의 정사각형 Div를 만들 수 있습니까? *

폭과 높이에 따른 종횡비 유지

정사각형 div를 너비와 높이를 기준으로 종횡비를 유지하면서 뷰포트 내에서 동적으로 맞추고 중앙에 맞출 수 있나요? ?

요구 사항:

• CSS 전용 솔루션
• 정사각형 크기가 뷰포트의 크기에 자동으로 조정됩니다. 최소 치수.
• 사각형은 가로와 세로 모두 중심에 있습니다.

해결책:

종횡비 속성(2022) )

목표를 달성하려면 종횡비 속성(MDN 참조)을 활용하세요. 이 뛰어난 도구를 사용하면 너비와 높이의 비율을 지정하여 원하는 측면이 유지되도록 할 수 있습니다.

뷰포트 크기(너비 및 높이)에 따라 가로 세로 비율 유지:

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

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

/* For the demo */

body {
  margin: 0;
}</code>

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

이 예에서:

• ar-1-1 클래스가 있는 Div는 1:1 가로세로 비율을 유지합니다.
• ar-1- 클래스가 있는 Div는 19 가로세로 비율은 16:9를 유지합니다.
• 모든 div는 뷰포트의 크기에 따라 크기를 동적으로 조정하여 적절한 중심 배치를 보장합니다.

위 내용은 질문과 답변 형식에 초점을 맞춘 몇 가지 잠재적인 기사 제목은 다음과 같습니다. * 뷰포트에서 종횡비와 중심을 유지하는 동적 크기의 정사각형 Div를 만들 수 있습니까? *의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!