>  기사  >  웹 프론트엔드  >  CSS만 사용하여 이미지 크기를 백분율 내에서 백분율로 조정할 수 있나요?

CSS만 사용하여 이미지 크기를 백분율 내에서 백분율로 조정할 수 있나요?

Patricia Arquette
Patricia Arquette원래의
2024-10-30 22:25:02389검색

Can you Resize an Image to a Percentage Within a Percentage Using Only CSS?

CSS 이미지 크기 조정: 백분율 내에서 백분율 달성

이미지 크기를 원래 크기의 백분율로 조정하는 것은 CSS만으로는 어려운 것처럼 보일 수 있습니다. . 그러나 놀랍게도 두 가지 혁신적인 방법을 사용하면 가능합니다.

방법 1: 시각적 변환

이 방법을 사용하면 실제 크기를 변경하지 않고도 이미지의 크기를 시각적으로 조정할 수 있습니다. 결과 이미지는 원래 크기의 중앙에 배치됩니다.

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

이 CSS를 아래 자리 표시자 이미지와 같은 이미지에 적용하면 시각적으로 원래 크기의 50%로 축소됩니다.

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.