CSS가 요소 높이를 너비에 동적으로 일치시켜 1:1 종횡비를 유지할 수 있습니까?

CSS 유동 레이아웃에서 높이와 너비를 동적으로 일치

유동 CSS 레이아웃에서 요소는 사용 가능한 공간에 따라 자동으로 크기를 조정할 수 있습니다. . 이는 정사각형이나 직사각형과 같은 특정 가로 세로 비율을 유지하려고 할 때 문제가 될 수 있습니다.

질문:

CSS를 사용하여 높이를 설정할 수 있나요? 1:1 비율을 유지하면서 너비와 동일한 요소 ratio?

예:

다음 구조를 갖는 컨테이너 요소와 중첩된 div 요소를 생각해 보세요. 레이아웃:

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS:

div {
  width: 80%;
  height: same-as-width
}

해결 방법:

높이를 설정할 수는 없지만 CSS만으로 너비를 명시적으로 일치시키려면 더미 요소와 영리한 방법을 사용하여 해결 방법을 얻을 수 있습니다. positioning.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div>

더미 요소의 margin-top 속성을 사용하고 이를 75%(가로세로 비율 4:3 일치)로 설정하여 높이에 대한 참조를 생성합니다. 그런 다음 요소는 이 참조 영역 내에 절대적으로 배치되어 너비와 높이가 동일해집니다.

위 내용은 CSS가 요소 높이를 너비에 동적으로 일치시켜 1:1 종횡비를 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!