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

배경 이미지가 포함된 Div 요소의 동적 높이 문제 해결

div 요소가 배경 이미지에 맞게 높이를 적절하게 조정하는지 어떻게 확인할 수 있나요? 고정 높이 또는 최소값을 수동으로 지정하지 않고 할당한 배경 이미지의 크기 높이?

배경 이미지 자동 조정 기술 공개

웹 개발자는 배경 이미지가 있는 div 요소의 이미지 요소 동작을 모방하는 독창적인 솔루션을 고안했습니다. 이미지의 가로 세로 비율을 활용하여 컨테이너 div의 높이를 동적으로 결정할 수 있습니다.

단계별 구현:

1. div 요소를 0으로 설정합니다.
2. 이미지 높이 대 너비 비율에 컨테이너의 비율을 곱하여 패딩 상단 비율을 계산합니다. width.

예를 들어 높이가 853픽셀, 너비가 1280픽셀이고 div 너비가 100%인 이미지가 있다고 가정합니다.

padding-top: 66.64% /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */

CSS 예:

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

실용적 애플리케이션:

이 기술은 div 요소에 배경 이미지에 맞게 높이를 자동으로 조정하는 기능을 부여합니다. img 요소를 사용하는 것과 유사하지만 명시적인 높이 또는 최소 높이 선언이 필요하지 않습니다.

이 실제 예제를 확인하세요: http://jsfiddle.net/8m9ur5qj/

By 컨테이너의 크기를 조정하면 배경 이미지의 가로 세로 비율을 유지하면서 div의 높이가 어떻게 동적으로 변경되는지 확인할 수 있습니다.

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