打印预览不遵循宽度图像/颜色

I would like to know if anyone have suggestion/idea to make print preview follow my width color..

My current code is as follow

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

my css

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

as i can't post link for image coz of my limitation,
red,yellow and green is a graphic image of 1px width and 30px height.
while star_rating is transparent five star so i can display specific color in it background according to the percentage.

In a normal website view, the width follow accordingly like below:

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

Then at print preview, it display fully width like below:

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

If anyone have any idea how to make print preview follow my graphic width smoothly, i appreciate if you can share. Thank you.

Ah, it looks like i found an answer to this...

1st of all, i just realize that in print preview, my star_rating.png has shrink and does not follow the correct width.

Therefore, i add class at my star_rating image. And in css, i use @media print to declare min-width for that class. You can refer code below:

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

and my css like below
@media print{.star_transparent{min-width:164px;}}

I can close this question i think... Thank you.