이미지가 상위 요소의 높이에 영향을 미치지 않도록하는 방법은 무엇입니까? 순수한 CSS 솔루션은 무엇입니까?

부모 요소 높이에 영향을 미치지 않도록 이미지를 영리하게 제어

웹 레이아웃에서는 부모 컨테이너가 자식 요소 (예 : 많은 종횡비가있는 그림)에 의해 모호하게 지원되는 경우가 종종 있습니다. 이 기사에서는 순수한 CSS 방법을 사용하여 부모 컨테이너 높이가 이미지 높이가 아니라 텍스트 내용의 영향을받는 방법에 대해 설명합니다.

상위 컨테이너에 그림과 텍스트 단락이 포함되어 있다고 가정하면, 우리는 부모 컨테이너 높이가 텍스트 내용에 따라 결정되기를 원합니다. 부모 요소 높이가 늘어난 이유는 자식 요소 (그림 및 텍스트)가 문서 스트림을 벗어나지 않고 상위 요소 높이가 사전 설정되지 않기 때문입니다.

주요 솔루션은 다음과 같습니다.

• 절대 포지셔닝 사용 : 이미지를 position: absolute; 문서 스트림에서 꺼내려면. 이미지는 여전히 부모 컨테이너에 시각적으로 위치하지만 모 컨테이너의 높이에는 영향을 미치지 않습니다. 사진의 top , left , right , bottom 속성은 실제 상황에 따라 조정되어 위치를 제어해야합니다.

• 배경 이미지 사용 : 이미지를 자르거나 스케일링 할 수 있으면 이미지를 모 컨테이너의 배경 이미지로 설정할 수 있습니다. 이미지 디스플레이 효과를 제어하기 위해 background-size , background-position 및 기타 속성을 사용하십시오. 그러나이 방법은 이미지가 원래 규모와 크기를 유지 해야하는 경우 모든 상황에 적합하지는 않습니다.

요컨대, 절대 포지셔닝을 사용하는 것은 일반적으로 부모 요소의 높이에 영향을 미치지 않고 이미지를 효과적으로 제어 할 수있는보다 직접적이고 유연한 솔루션입니다.

위 내용은 이미지가 상위 요소의 높이에 영향을 미치지 않도록하는 방법은 무엇입니까? 순수한 CSS 솔루션은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!