CSS에서 너비 또는 높이를 100%로 설정하는 동안 종횡비를 유지하는 방법은 무엇입니까?

CSS에서 가로 세로 비율을 100%로 유지하기

CSS를 사용할 때 이미지의 너비나 높이를 설정해야 하는 경우가 많습니다. 100%로. 그러나 그렇게 하면 이미지가 왜곡될 수 있습니다. 이는 가로 세로 비율(이미지의 너비와 높이의 비례 관계)이 유지되지 않기 때문에 발생합니다.

너비 또는 높이를 100% 사용하면서 가로 세로 비율을 유지하려면 이미지 크기를 일정하게 제한해야 합니다. 구체적인 방법. 이미지에 하나의 치수(너비 또는 높이)만 정의하면 가로 세로 비율이 자동으로 유지됩니다.

그러나 너비와 높이를 모두 100%로 설정하면 이미지가 너무 커질 수 있습니다. 의도된 공간. 이 경우 필요에 맞는 최대 너비 또는 높이를 사용하여 DIV 내부에 이미지를 배치할 수 있습니다. 그런 다음 Overflow:hidden 속성을 사용하여 지정된 크기를 벗어나는 이미지 부분을 자를 수 있습니다.

또는 max-width 및 max-height 속성을 사용하여 이미지의 최대 크기를 제어할 수 있습니다. 영상. 최소 크기를 정의하지 않고 이러한 값을 설정함으로써 이미지가 왜곡되지 않고 지정된 최대 크기를 초과하지 않도록 보장합니다.

위 내용은 CSS에서 너비 또는 높이를 100%로 설정하는 동안 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!