배경 이미지에 반응하는 Div의 높이를 어떻게 만들 수 있나요?

배경 이미지가 포함된 반응형 Div 높이

반응형 이미지의 개념을 확장하면 비슷한 기술을 div에 적용하여 자동으로 조정할 수 있습니다. 배경 이미지의 크기에 따른 높이. 높이나 최소 높이를 명시적으로 설정하지 않고도 유동적이고 역동적인 레이아웃을 만들 수 있습니다.

해결책

이를 달성하기 위해 패딩 탑의 힘을 활용할 수 있습니다. . div의 높이를 0으로 설정하고 패딩 상단 값을 백분율로 조작하면 이미지 요소의 동작을 모방할 수 있습니다.

코드 분석은 다음과 같습니다.

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

• 원하는 이미지 URL로 background-image 속성을 설정하세요.
• 이미지가 크기에 맞는지 확인하려면 background-size: contain을 사용하세요. div를 화면 비율을 왜곡하지 않고 복사합니다.
• 이미지 타일링을 방지하려면 배경 반복을 반복 없음으로 설정합니다.
• 전체 너비 동작을 위해 너비를 100%로 설정합니다.
• 강제된 높이 제한을 제거하려면 높이를 0으로 유지하세요.
• 패딩 상단 값을 비율로 계산합니다. 이미지 높이를 이미지 너비에 컨테이너 너비를 곱한 값입니다. 이렇게 하면 div 높이가 적절하게 조정됩니다.

예

이 기술을 사용하여 이미지 높이가 853픽셀이고 너비가 1280픽셀인 다음 div를 생각해 보세요.

<div>

이 div는 이미지 크기에 따라 높이를 자동으로 조정합니다. 반응적이고 동적인 레이아웃 요소를 생성합니다.

위 내용은 배경 이미지에 반응하는 Div의 높이를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!