누구나 jplayer의 원형판 스킨의 크기를 반으로 줄 수 있습니까?

Question

서클 플레이어의 CSS 파일을 사용하여 서클 플레이어의 절반 크기로 수정했습니다. 내가 한 것은 CSS의 값을 절반 크기로 변경하는 것입니다. 아래 코드 예제를 참조하십시오.

.cp-container.small { 
    position: relative; 
    width: 52px !important; 
    height: 52px !important; 
    background: url("bgr.jpg") 0 0 no-repeat; 
    padding: 24px; 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
} 

.cp-container :focus { 
    border:none; 
    outline:0; 
} 

.cp-buffer-1.small, 
.cp-buffer-2.small, 
.cp-progress-1.small, 
.cp-progress-2.small { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 52px !important; 
    height: 52px !important; 
    clip: rect(0px,26px,52px,0px) !important; 

    -moz-border-radius: 52px; 
    -webkit-border-radius: 52px; 
    border-radius: 52px; 
} 

.cp-buffer-1.small, 
.cp-buffer-2.small { 
    background: url("buffer.png") 0 0 no-repeat; 
} 


/* FALLBACK for .progress 
* (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step) 
* (It needs the container selector to work. Or use div) 
*/ 

.cp-container .cp-fallback.small { 
    background: url("progress_sprite-green.jpg") no-repeat; 
    background-position: 0 104px !important; 
} 

/* .cp-progress-1, 
.cp-progress-2 { 
    background: url("progress.png") 0 0 no-repeat; 
} */ 

.cp-progress-1.green.small, 
.cp-progress-2.green.small{ 
    background: url("progress-green.png") 0 0 no-repeat; 
} 

.cp-progress-1.blue.small, 
.cp-progress-2.blue.small{ 
    background: url("progress-blue.png") 0 0 no-repeat; 
} 

.cp-progress-1.red.small, 
.cp-progress-2.red.small{ 
    background: url("progress-red.png") 0 0 no-repeat; 
} 

.cp-buffer-holder.small, 
.cp-progress-holder.small, 
.cp-circle-control.small { 
    position:absolute; 
    width: 52px !important; 
    height: 52px !important; 
} 

.cp-circle-control { 
    cursor:pointer; 
} 

.cp-buffer-holder.small, 
.cp-progress-holder.small { 
    clip:rect(0px,52px,52px,26px) !important; 
    display:none; 
} 


/* This is needed when progress is greater than 50% or for fallback */ 

.cp-buffer-holder.cp-gt50, 
.cp-progress-holder.cp-gt50, 
.cp-progress.cp-fallback{ 
    clip:rect(auto, auto, auto, auto); 
} 

.cp-controls.small { 
    margin:0; 
    padding: 13px !important; 
} 

.cp-controls li{ 
    list-style-type: none; 
    display: block; 

    /*IE Fix*/ 
    position: absolute; 
} 

.cp-controls.small li a{ 
    position: relative; 
    display: block; 
    width:25px !important; 
    height:25px !important; 
    text-indent:-9999px; 
    z-index:1;  
} 

/* .cp-controls .cp-play { 
    background: url("controls.jpg") 0 0 no-repeat; 
} */ 

.cp-controls .cp-play.green.small { 
    background: url("controls-green.jpg") 0 0 no-repeat; 
} 

.cp-controls .cp-play.red.small { 
    background: url("controls-red.jpg") 0 0 no-repeat; 
} 

.cp-controls .cp-play.blue.small { 
    background: url("controls-blue.jpg") 0 0 no-repeat; 
} 



.cp-controls .cp-play.green.small:hover{ 
    background: url("controls-green.jpg") -25px 0 no-repeat; 
} 

.cp-controls .cp-play.red.small:hover { 
    background: url("controls-red.jpg") -25px 0 no-repeat; 
} 

.cp-controls .cp-play.blue.small:hover { 
    background: url("controls-blue.jpg") -25px 0 no-repeat; 
} 

/* .cp-controls .cp-pause { 
    background: url("controls.jpg") 0 -50px no-repeat; 
} */ 

.cp-controls .cp-pause.green.small{ 
    background: url("controls-green.jpg") 0 -25px no-repeat; 
} 

.cp-controls .cp-pause.red.small{ 
    background: url("controls-red.jpg") 0 -25px no-repeat; 
} 

.cp-controls .cp-pause.blue.small { 
    background: url("controls-blue.jpg") 0 -25px no-repeat; 
} 

/* .cp-controls .cp-pause:hover { 
    background: url("controls.jpg") -50px -50px no-repeat; 
} */ 

.cp-controls .cp-pause.green.small:hover { 
    background: url("controls-green.jpg") -25px -25px no-repeat !important; 
} 

.cp-controls .cp-pause.red.small:hover { 
    background: url("controls-red.jpg") -25px -25px no-repeat !important; 
} 

.cp-controls .cp-pause.blue.small:hover { 
    background: url("controls-blue.jpg") -25px -25px no-repeat !important; 
} 

.cp-jplayer { 
    width: 0; 
    height: 0; 
} 

나는 Firefox에서 작동하지만 ok에서는 작동하지만 ok에서는 작동하지 않습니다. 글쎄, 당신이이 문제를 도와주기를 바랍니다.

Answer 1

귀하의 포지션도 반감 될 것 같지 않습니다

위

background-position: 0 104px !important; 

는 반으로 잘라해야합니다. 원한다면 내가 만든 하프 사이즈 파일을 보낼 수 있습니다!

Answer 2

또 다른 간단한 방법은 CSS의 zoom 속성을 사용하는 것입니다. 이미지 크기를 조정하거나 CSS를 변경하지 마십시오. .cp-container에 zoom: 50%;을 추가하십시오.