CSS만 사용하여 요소 종횡비를 어떻게 유지할 수 있나요?

CSS를 사용하여 요소 종횡비 유지: 높이에서 최소 너비

높이에 맞게 요소의 최소 너비를 설정하는 것이 어려울 수 있습니다. 높이가 명시적으로 정의되지 않은 경우. jQuery를 사용하면 솔루션이 제공되지만 CSS에서 직접 이 동작을 달성할 수도 있습니다.

가로세로 비율을 유지하려면 "대체된 요소" 개념을 활용하세요. 이미지()가 대표적인 예이다. 높이를 설정하면 고유한 종횡비가 유지되어 너비가 일치하도록 자동으로 조정됩니다.

CSS 솔루션 구현

원하는 임의의 "컨테이너"를 만듭니다. 높이를 입력하고 위치를 "상대적"으로 설정합니다. 컨테이너 내부에 높이가 100%인 이미지를 추가합니다. 이렇게 하면 이미지의 너비가 비율에 맞게 자동으로 설정됩니다.

크기에 영향을 주지 않고 전체 컨테이너 공간을 차지하도록 절대 위치 지정을 사용하여 "contents" 요소를 중첩합니다.

가로세로 비율 제어

가로세로 비율을 조정하려면 이미지의 높이를 변경하세요. 예를 들어 4:3 비율을 사용하려면 이미지 높이를 133%로 설정해야 합니다.

추가 고려 사항

솔루션에 사용된 투명한 1x1 px gif는 다음으로 대체할 수 있습니다. 캔버스나 SVG와 같은 다른 요소. 원본 이미지의 가로 세로 비율이 1:1이 아닌 경우 높이 값을 조정해야 합니다.

너비에 따라 요소 높이를 설정하려면 "CSS를 사용하여 Div의 가로 세로 비율 유지"를 참조하세요. 자원.

위 내용은 CSS만 사용하여 요소 종횡비를 어떻게 유지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!