打印預覽不遵循寬度圖像/顏色

Question

我想知道如果任何人有意見/想法，使打印預覽按照我的寬度顏色..

我當前的代碼如下

<?php 
$purata = 3.4; 
$percentagePurata = number_format(($purata/5)*100,0); 


echo'<div style="width:164px;margin:0 auto">'; 

$widthStar = (($purata/5)*164)-1;  
if ($percentagePurata <=69 && $percentagePurata > 0){ 
    echo '<div class="star_red" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>'; 
} else if ($percentagePurata > 69 && $percentagePurata <= 74){ 
    echo '<div class="star_yellow" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>'; 
} else if ($percentagePurata > 74 && $percentagePurata <= 100) { 
    echo '<div class="star_green" style="width:'.$widthStar.'px;"><img src="images/star_rating.png"></div>'; 
} 
if ($percentagePurata == 0){ 
    echo '<div><img src="images/star_rating.png"></div>'; 
} 

echo'</div>'; 
?> 

我的CSS

.star_red{background:url(../images/red.png);} 
.star_yellow{background:url(../images/yellow.png);} 
.star_green{background:url(../images/green.png);} 

，因爲我不能張貼鏈接，我的限制的圖像堂妹，
紅色，黃色和綠色是1px的寬度和30像素喜的圖形圖像GHT。
雖然star_rating是透明的五顆星，所以我可以根據百分比在背景中顯示特定的顏色。

在一個正常的網站視圖，該寬度相應地遵循象下面這樣：

http://imageshack.com/a/img674/5853/xkJArC.jpg

然後，在打印預覽，它充分顯示寬度象下面這樣：

http://imageshack.com/a/img537/2512/Uhjwzr.jpg

如果任何人都有任何想法如何使打印預覽順利我的圖形寬度，我欣賞，如果你可以分享。謝謝。

Answer 1

啊，它看起來像我找到了答案，這...所有的

月1日，我才意識到，在打印預覽，我star_rating.png有縮水，不遵循正確的寬度。

因此，我在我的star_rating圖像上添加類。在CSS中，我使用@media print來爲該類聲明最小寬度。您可以參考下面的代碼：

<?php 
$purata = 3.4; 
$percentagePurata = number_format(($purata/5)*100,0); 

echo'<div style="width:164px;margin:0 auto">'; 
$widthStar = (($purata/5)*164)-1;  
if ($percentagePurata <=69 && $percentagePurata > 0){ 
echo '<div class="star_red" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>'; 
} else if ($percentagePurata > 69 && $percentagePurata <= 74){ 
echo '<div class="star_yellow" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>'; 
} else if ($percentagePurata > 74 && $percentagePurata <= 100) { 
echo '<div class="star_green" style="width:'.$widthStar.'px;"><img class="star_transparent" src="images/star_rating.png"></div>'; 
} 
if ($percentagePurata == 0){ 
echo '<div><img src="images/star_rating.png"></div>'; 
} 

echo'</div>'; 
?> 

和我的CSS像下面
@media打印{{.star_transparent最小寬度：164px;}}

我可以關閉這個問題，我想...謝謝您。