Предварительный просмотр не соответствует ширине изображения/цвет

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);} 

, как я не могу опубликовать ссылку на изображение Coz моего ограничения,
красный, желтый и зеленый является графическим изображением ширины 1px и 30px хея 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 для объявления min-width для этого класса. Вы можете сослаться код ниже:

<?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;}}

Я могу закрыть этот вопрос я думаю ... Спасибо вы.