CSS를 사용하여 이미지 크기를 특정 비율로 조정

웹 디자인 영역에서는 이미지 크기를 특정 크기로 조정해야 함 자주 발생합니다. 한 가지 시나리오에는 컨테이너 요소의 크기를 변경하지 않고 이미지 크기를 원래 크기의 백분율로 줄이는 것이 포함됩니다. JavaScript 또는 서버 측 스크립팅이 솔루션을 제공하지만 이 문서에서는 잠재적인 CSS 전용 대안을 살펴봅니다.

CSS 백분율을 사용하여 이미지 크기를 조정할 수 있습니까?

현재 , 자체 크기에 따라 이미지 크기를 조정할 수 있는 직접적인 CSS 속성은 없습니다. 그러나 이 효과를 얻을 수 있는 두 가지 독창적인 방법이 있습니다.

방법 1: 변환을 통한 시각적 크기 조정

이 방법은 이미지 크기에 영향을 주지 않고 시각적으로 이미지 크기를 줄입니다. 실제 치수. 이 기술은 'transform: scale()' 속성을 사용하여 지정된 비율만큼 이미지를 축소합니다. 이미지는 원래 크기의 중앙에 유지됩니다.

예:

img {
  transform: scale(0.5);
}