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

배경 이미지 크기에 따라 Div 높이 자동 조정 달성

웹 개발에서는 div 높이를 자동으로 조정하는 것이 바람직한 경우가 많습니다. 배경 이미지의 크기입니다. 그러나 div에 특정 높이 또는 최소 높이를 설정하면 유연성이 제한될 수 있습니다.

배경 이미지가 img 요소처럼 동작하도록 하여 높이가 자동으로 조정되도록 하는 혁신적인 솔루션이 있습니다. 이를 위해서는 이미지의 너비와 높이 비율이 필요합니다.

div의 높이를 0으로 설정하고 이미지 비율에 따른 백분율로 padding-top 속성을 정의합니다. 다음 코드는 이를 보여줍니다.

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

이 접근 방식은 본질적으로 img 요소와 유사하게 자동 높이가 있는 배경 이미지를 제공합니다. http://jsfiddle.net/8m9ur5qj에서 작동하는 프로토타입을 찾을 수 있습니다. 배경 이미지의 크기에 따라 높이가 자동으로 조정되는 방식을 관찰하려면 div 크기를 조정하세요.

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