为 JS window.print() 调整 html IMG 的大小

Question

我目前在我的网站上有一个打印选项，我正在使用@media隐藏来隐藏特定元素，当我调用javascript打印函数时，我将如何更改@media中的图像大小？ 我可以轻松更改普通的div 元素，但我像这样从 php 调用图像：

<tr>
<td id="tdimg" width='200px' align='center'>
<?
if ($obituary['photo']!="")
if (file_exists("../photos/".$obituary['photo']))
echo"<img src='../photos/".$obituary['photo']."?".strtotime($obituary['addedon'])."' style='height:auto;width:180px;' border='0'>";

当调用 window.print 时，我不知道如何在此处编辑图像大小。 我使用它作为打印代码：

<a style="text-decoration:none" href="javascript:;" onclick="printFunction()">
<img src="../images/print.png" alt="Print" />
</a>

这是我的@media

@media print { 
#share-buttons { 
visibility: hidden; 
}
#flowersButton {
visibility: hidden;
}
td img{
width:600px;
}
} 

任何帮助非常感谢，谢谢。

Answer 1

CSS 总是使用最接近的样式，这意味着内联样式(如style="..."(覆盖页面样式(如.myclass { ... }(。

在这种情况下，图像style='height:auto; width:180px;'上的内联宽度将覆盖媒体查询td img{width:600px;}。

您可以做的是：1.
删除内联样式，然后
2.在媒体查询上方添加td img{height:auto; width:180px;}

阅读更多关于 css 中特异性的信息。