CSS 스프라이트 내에서 이미지 크기를 조정하는 방법은 무엇입니까?

CSS 스프라이트에서 이미지 크기를 조정하는 방법

CSS 스프라이트의 경우 큰 이미지에서 작은 이미지를 잘라내어 효율적으로 표시하려면 잘린 영역의 크기를 조정해야 하는 경우가 많습니다. 이 문서에서는 이 문제에 대한 해결책을 제공합니다.

다양한 방법을 사용하여 CSS 스프라이트에서 이미지 크기 조정을 달성할 수 있습니다.

배경 크기 사용(권장):

background-size: 150% 150%;

배경 크기는 대부분의 최신 브라우저에서 널리 지원됩니다. 이미지의 크기를 가로 및 세로로 모두 조정할 수 있습니다.

크로스 브라우저 지원을 위해 확대/축소 및 변환:규모 사용:

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

이 접근 방식은 확대/축소를 사용하여 Webkit/Blink/IE 브라우저 및 변환:Mozilla(-moz-) 및 기존 Opera(-o-) 브라우저용 확장으로 크로스 브라우저 구현 호환성.

참고: 솔루션을 구현할 때 브라우저 지원을 고려하는 것이 중요합니다. 프로덕션에서 이러한 기술을 사용하기 전에 항상 브라우저 호환성을 확인하십시오.

위 내용은 CSS 스프라이트 내에서 이미지 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!