javascript - 如何在打印布局 html 中设置 img 样式

Question

我是网络开发新手，我正在尝试创建一个打印网页的功能。一切正常，但我在设计图像样式时遇到一些困难。我已经使用媒体查询设置了其他内容的样式，隐藏了不必要的 div 和元素，但是对于具有内联样式 width: 100% 的图像，我遇到了一些困难。

我在下面附上我的代码:

Javascript

$('#print-btn-page').click(function(){  
   alert('pagina');
   var url_popup = '<?php echo $page_link?>';
   console.log(url_popup);
   var pagina = window.open(url_popup);
   setTimeout(function () { pagina.print(); }, 500);
   pagina.onfocus = function () { setTimeout(function () { pagina.close(); }, 500); }   
});

CSS打印样式(位于style.css末尾)

/* Print Style */
@media print {
   a[href]:after {
       content: none !important;
   }
   .icam-top-footer{display:none}
   .icam-bottom-footer{display:none}
   .icam-bottom-footer-mobile{display:none}
   .icam-page-submenu{display:none}
   .icam-main-menu{display:none}
   .icam-menu-sidebar{display:none}
   .icam-logo-print{display: none}
   .icam-page-prodotti-preview{text-align: center; }
   .icam-page-prodotti-preview > img{display: inline-block; margin-right: auto; margin-left: auto; }
   .icam-cta-section{display: none}
   .icam-form-contatti{display:none}
   .icam-case-prod-case-studies-prod{display: none}
   .icam-product-case-studies{display:none}
   .icam-btn-red{display:none}
   img{width: 10%; height: auto}
   h4, h5, a{display:none}
}

Answer 1

如果你想覆盖内联CSS，请使用!important:

img{width: 10%!important; height: auto}