打印预览不跟随宽度图像/颜色答案

【问题标题】：Print preview does not follow width image/color打印预览不跟随宽度图像/颜色
【发布时间】：2014-10-10 20:19:59
【问题描述】：

我想知道是否有人有建议/想法让打印预览跟随我的宽度颜色..

我目前的代码如下

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

如果有人知道如何使打印预览平滑地跟随我的图形宽度，如果你能分享，我很感激。谢谢。

【问题讨论】：

标签： php html css printing

【解决方案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 print{.star_transparent{min-width:164px;}}

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

【讨论】：