Wie style img im Drucklayout html

Question

Ich bin neu in der Webentwicklung und ich versuche, eine Funktion zu erstellen, die eine Webseite druckt. Alles funktioniert einwandfrei, aber ich habe einige Probleme mit dem Styling von Bildern. Ich hatte bereits andere Dinge mit Medienanfragen gestylt, versteckte unnötige divs und Elemente, aber ich habe einige Schwierigkeiten mit Bildern, die Inline-Stil width: 100% haben.

lege ich meinen Code unten:

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 Druckstil (am Ende der 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

Verwenden wichtig! Wenn Sie Inline-CSS überschreiben möchten:

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