CSS로 크기를 조정하는 동안 이미지 종횡비를 어떻게 유지할 수 있습니까?

CSS를 사용하여 크기를 조정하는 동안 이미지 비율 유지: 종합 가이드

웹 개발 영역에서는 이미지 크기를 크기에 맞게 조정해야 하는 경우가 많습니다. 다양한 디스플레이 요구 사항. 그러나 원하지 않는 늘어짐이나 왜곡을 방지하려면 이미지의 종횡비를 유지하는 것이 중요합니다. 이를 달성하기 위해 CSS는 우아한 솔루션을 제공합니다.

Object-Fit: 비율 유지의 핵심

object-fit 속성은 대체된 요소의 콘텐츠를 제어하는 ​​방법을 제어합니다 img 또는 비디오와 같은 파일은 컨테이너에 맞게 크기를 조정해야 합니다. 이 속성을 활용하면 원래 가로 세로 비율을 유지하면서 이미지 크기를 조정하는 방법을 지정할 수 있습니다.

요소를 채우는 동안 비율 유지

요소를 다음으로 채우려면 비율을 유지하면서 이미지를 만들려면 개체 맞춤 속성에 "cover" 값을 사용하세요. 이는 요소를 완전히 채우도록 이미지 크기를 조정하고, 가로 세로 비율이 유지되도록 가장자리에서 초과 콘텐츠를 자르도록 브라우저에 지시합니다.

예:

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="CSS로 크기를 조정하는 동안 이미지 종횡비를 어떻게 유지할 수 있습니까?" >

코드 데모

위의 예에서 커버 클래스는 object-fit: 커버 속성을 사용하여 다음을 보장합니다. 너비가 150px이고 높이가 100px인 요소를 채우도록 이미지 크기가 조정됩니다. 이미지의 원래 크기(너비 242픽셀, 높이 363픽셀)에도 불구하고 지정된 요소 크기 내에서 가로 세로 비율을 유지하기 위해 크기가 조정되고 잘립니다.

위 내용은 CSS로 크기를 조정하는 동안 이미지 종횡비를 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!