CSS를 사용하여 요소의 높이를 너비와 동적으로 일치시키려면 어떻게 해야 합니까?

CSS를 사용하여 동적 너비와 일치하도록 유체 높이 설정

특히 작업할 때 너비를 완벽하게 반영하는 높이를 설정하는 것이 어려울 수 있습니다. 동적 레이아웃으로. 그러나 영리한 CSS 기술을 사용하면 이러한 1:1 비율을 달성할 수 있습니다.

CSS에서 "높이" 속성은 "너비와 동일"을 포함한 다양한 측정 단위를 허용합니다. 불행하게도 이 값은 현재 CSS 구현에는 존재하지 않습니다.

다행히도 더미 요소와 함께 "표시" 및 "위치" 속성을 활용하는 해결 방법이 나타났습니다. 이 솔루션에는 다음이 포함됩니다.

1. 컨테이너 요소를 "인라인 블록" 및 "상대" 위치 지정으로 설정합니다.
2. 원하는 측면을 생성하는 여백 상단 값이 있는 더미 요소 추가 비율. 이 예에서는 4:3 가로 세로 비율이 활용됩니다(여백-상단 75%).
3. 컨테이너 내에 절대 요소를 배치하여 사용 가능한 전체 공간을 늘려 채웁니다.

이 기술을 사용하면 절대 요소는 동적 특성에 관계없이 컨테이너 너비에 맞게 높이를 자동으로 조정합니다. 더미 요소는 다양한 비율을 얻기 위해 수정될 수 있는 초기 종횡비를 설정하는 자리 표시자 역할을 합니다.

이 솔루션은 일관된 높이 대 너비 비율로 동적 유동 레이아웃을 생성하는 깔끔하고 효과적인 방법을 제공합니다. CSS만 사용합니다.

위 내용은 CSS를 사용하여 요소의 높이를 너비와 동적으로 일치시키려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!