jplayerのcircleplayerスキンの半分のサイズを手助けできますか？

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で動作確認しましたが、IEでは動作しませんでした。さて、あなたはこの問題を助けてくれることを願っています。

Answer 1

あなたのポジションは、同様に半減していないようです：

background-position: 0 104px !important; 

上記の半分にカットされなければなりません。あなたが望むなら、私が作った作業用のハーフサイズのファイルをあなたに送ることができます！

Answer 2

もう1つの簡単な方法は、CSSのズームプロパティを使用することです。画像のサイズを変更したり、CSSを変更したりしないでください。 .cp-containerにzoom: 50%;を追加するだけです