크기가 조정된 CSS 요소 주위의 공백을 제거하는 방법은 무엇입니까?

크기가 조정된 CSS 요소 주위의 공백 해결

CSS 요소에 크기 조정 변환을 적용하면 CSS 요소 주위에 공백이 나타날 수 있습니다. 확장된 요소. 이는 크기 조정이 요소의 렌더링된 크기에 영향을 주지만 물리적 크기에는 영향을 주지 않고 주변 공간을 비워두기 때문입니다.

문제 이해

크기 조정과 같은 CSS 변환 , 배경 및 하위 요소를 포함하여 요소의 렌더링된 콘텐츠를 하나의 단위로 이동하고 주변 요소는 원래 위치에 둡니다. 이로 인해 크기가 조정된 요소 주위에 빈 공간이 생깁니다.

해결 방법

공백을 제거하려면 요소의 렌더링된 크기를 조정된 크기와 일치하도록 조정해야 합니다. 이는 너비 및 높이와 같은 CSS 속성을 사용하여 달성할 수 있습니다. 방법은 다음과 같습니다.

CSS 솔루션:

<code class="css">.quarter.scale-thumb {
  width: 60%; // Adjusted width to match scaled size
  height: 60%; // Adjusted height to match scaled size
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}</code>

JavaScript 솔루션:
또는 JavaScript를 사용하여 다음을 수행할 수 있습니다. 변환을 적용한 후 요소의 크기를 수동으로 조정합니다.

<code class="javascript">document.querySelector('.quarter.scale-thumb').style.width = '60%';
document.querySelector('.quarter.scale-thumb').style.height = '60%';</code>

크기가 조정된 요소의 너비와 높이를 조정하면 여분의 공백을 제거하고 크기가 조정된 콘텐츠가 의도한 공간에 꼭 맞게 들어가도록 할 수 있습니다.

위 내용은 크기가 조정된 CSS 요소 주위의 공백을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!