php - 打印预览不符合宽度图像/颜色

我想知道是否有人建议/想法使打印预览遵循我的宽度颜色。

我当前的代码如下

<?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，高度为30px的图形图像。
而star_rating是透明的五颗星，因此我可以根据百分比在背景中显示特定颜色。

在普通网站视图中，宽度相应地如下所示：

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

然后在打印预览时，它会显示完整的宽度，如下所示：

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

如果有人对如何使打印预览流畅地跟随我的图形宽度有任何想法，请与您分享。谢谢。

最佳答案

嗯，看来我找到了答案...

首先，我只是意识到在打印预览中，我的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 print {.star_transparent {min-width：164px;}}

我可以结束这个问题，我想...谢谢。