> 웹 프론트엔드 > CSS 튜토리얼 > 배경 이미지에 반응하는 Div의 높이를 어떻게 만들 수 있나요?

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

DDD
풀어 주다: 2024-12-16 10:01:14
원래의
679명이 탐색했습니다.

How Can I Make a Div's Height Responsive to its Background Image?

배경 이미지가 포함된 반응형 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿