CSS에서 종횡비를 유지하면서 100% 너비 또는 높이를 달성하는 방법은 무엇입니까?

CSS에서 가로 세로 비율을 유지하면서 너비 또는 높이를 100% 달성

CSS에서 너비를 100%로 설정하고 높이를 자동으로 설정하는 것(또는 그 반대로)은 이미지를 제한하는 데 자주 사용됩니다. 그러나 이로 인해 이미지가 불균형적으로 넓거나 길어질 수 있습니다.

이미지를 제한하면서 가로 세로 비율을 유지하려면 다음 접근 방식을 고려하세요.

DIV를 사용하여 제한 및 자르기 :

DIV 내에 이미지를 중첩하고 최대 너비, 최대 높이 및 오버플로: 숨김을 설정합니다. 이렇게 하면 이미지가 지정된 크기를 초과하는 것을 방지하고 초과분을 잘라낼 수 있습니다.

종횡비를 유지하고 최대 크기 제한:

max-width 및 max-height를 사용하세요. 최소 크기를 지정하지 않고 속성을 지정합니다. 이렇게 하면 이미지가 지정된 최대 크기보다 커지지 않으면서 가로 세로 비율을 유지할 수 있습니다.

예제 코드:

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

이 코드는 다음을 보장합니다. .image-container 내의 이미지는 원래 가로 세로 비율을 유지하면서 너비나 높이가 500픽셀을 초과하지 않아야 합니다.

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