CSS를 사용하여 Div 내에서 대형 이미지를 중앙에 배치하려면 어떻게 해야 합니까?

CSS를 사용하여 Div 내에서 큰 이미지를 중앙에 배치

div 너비가 다양한 유동 레이아웃으로 작업할 때 큰 이미지를 div 내에서 중앙에 배치하는 것이 어려울 수 있습니다. 이미지는 왼쪽 가장자리에서 시작하여 오른쪽 중앙에서 벗어나 있을 수 있습니다.

이 문제를 해결하기 위해 우리는 이미지를 효과적으로 중앙에 배치하여 양쪽 가장자리에 균일한 오버플로 차단을 생성하는 CSS 솔루션을 제안합니다.

<code class="css">.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}</code>

상위 div는 상대 위치를 설정하고 오버플로를 포함합니다. 이미지가 포함된 하위 div는 위쪽, 아래쪽, 왼쪽 및 오른쪽 값이 매우 음수인 절대 위치 지정을 갖습니다. 이러한 음수 값은 div의 표시 영역 너머로 이미지를 효과적으로 밀어냅니다. margin: auto 속성은 상위 div 내에서 이미지의 자동 중앙 정렬을 보장합니다.

이 기술을 사용하면 이미지가 원래 가로 세로 비율을 유지하여 이미지 품질을 손상시킬 수 있는 브라우저에서 발생하는 크기 조정 문제를 제거할 수 있습니다. 그 결과 양쪽이 균등하게 잘린 오버플로가 있는 중앙에 위치한 대형 이미지가 탄생했습니다.

위 내용은 CSS를 사용하여 Div 내에서 대형 이미지를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!