Div의 높이를 배경 이미지 크기에 맞게 동적으로 조정하려면 어떻게 해야 합니까?

배경 크기에 따라 동적 Div 높이 조정을 달성하는 방법

Div 요소는 웹 디자인에서 중요한 역할을 하며 개발자가 유연한 작업을 할 수 있도록 해줍니다. 그리고 반응형 레이아웃. 그러나 특정 높이 값을 명시적으로 정의하지 않고 배경 이미지의 크기와 일치하도록 div 높이를 설정하는 경우 문제가 될 수 있습니다.

문제 설명

할당된 배경의 크기에 따라 div의 높이가 자동으로 조정되도록 구성하는 방법 이미지?

답변

이러한 원활한 조정을 달성하려면 이미지의 가로 세로 비율과 CSS 속성 "padding-top"을 활용하는 영리한 접근 방식이 필요합니다. 작동 방식은 다음과 같습니다.

div의 높이를 0으로 설정하여 본질적으로 보이지 않게 만듭니다.
이미지 높이와 너비의 백분율 비율을 계산합니다.
div의 padding-top 속성을 설정합니다. div를 이 백분율 값으로 변환합니다.
예제 CSS 코드:

div {
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: (image-height / image-width) * 100%;
}

설명:

• padding-top 속성은 이미지의 가로 세로 비율을 유지하면서 div를 세로로 늘립니다.
• div의 높이는 그대로 유지됩니다. 0, 이미지에 따라 동적으로 확장하거나 축소할 수 있습니다. size.

작업 예제

다음은 이 기술이 실제로 작동하는 모습을 보여주는 프로토타입입니다: http://jsfiddle.net/8m9ur5qj/.

이 접근 방식을 따르면 배경 이미지의 크기에 맞게 높이를 쉽게 조정하는 div 요소를 만들 수 있습니다. 시각적으로 조화롭고 반응이 빠른 레이아웃입니다.

위 내용은 Div의 높이를 배경 이미지 크기에 맞게 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!