CSS만 사용하여 이미지 크기를 비례적으로 조정할 수 있나요?

CSS에서 이미지 크기를 비례적으로 조정

이미지 크기를 사용자 정의하는 것은 웹 개발에서 일반적인 작업이며, CSS를 사용하여 이를 수행하는 방법을 이해합니다. 필수적입니다. 이 기사에서는 이미지를 원래 크기의 일정 비율로 조정하는 방법을 살펴봅니다. 이는 이미지를 절반으로 줄여 50%로 줄이는 것과 유사합니다.

"너비: 50%;" 적용 이미지에 대한 크기는 이미지 자체에 비해 크기가 줄어들지 않고 오히려 와 같은 상위 요소에 따라 줄어듭니다. CSS만 사용하여 이미지의 크기를 비례적으로 조정할 수 있습니까?

방법 1: 시각적 변환

이 방법은 CSS 변환을 사용하여 이미지를 변경하지 않고 이미지의 시각적 모양을 수정합니다. DOM의 실제 크기. 크기를 조정하면 이미지가 중앙에 나타납니다.

<code class="css">img {
  transform: scale(0.5);
}</code>

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

위 내용은 CSS만 사용하여 이미지 크기를 비례적으로 조정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!