동적 너비와 동일한 높이로 CSS Div를 만드는 방법은 무엇입니까?

높이 일치 동적 너비: CSS 유동 레이아웃

시각적으로 균형 잡힌 디자인을 달성하기 위해 개발자는 종종 요소를 너비로 조정합니다. 이 질문은 폭과 높이가 동일한 div를 생성하고 1:1 종횡비를 유지하면서 폭을 동적으로 변경하는 방법이라는 일반적인 디자인 문제를 다룹니다.

제안된 솔루션에는 사전 정의된 가로 세로 비율이 있는 자리 표시자 요소입니다. 기본 요소를 자리 표시자 내에 배치하면 기본 요소의 너비가 변경되더라도 종횡비가 유지됩니다. 핵심은 위치 및 여백 상단과 같은 CSS 속성을 활용하여 요소를 전략적으로 정렬하고 크기가 비례적으로 유지되도록 하는 것입니다.

다음 코드 조각은 접근 방식을 보여줍니다.

#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! */
}

여기서 예를 들어 #container는 div의 동적 너비를 설정합니다. #dummy 요소는 margin-top 속성을 통해 달성된 고정된 4:3 가로 세로 비율의 자리 표시자로 사용됩니다. 그런 다음 #요소는 #dummy 내에 절대적으로 배치되어 전체 영역을 채우고 너비와 동일한 1:1 비율을 유지합니다.

위 내용은 동적 너비와 동일한 높이로 CSS Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!