如何在打印版式中設置img html

我是網絡開發新手，我正在嘗試創建一個打印網頁的功能。所有工作正常，但我有一些樣式圖像的困難。我已經使用媒體查詢設計了其他內容，隱藏了不必要的div和項目，但對於內嵌樣式爲width: 100%的圖像，我遇到了一些困難。如何在打印版式中設置img html

我在下方附上我的代碼：

的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} 
}

來源

2016-07-05 Pierpaolo Ercoli

什麼是這些「困難」，你想要發生什麼？ – evolutionxbox

圖像屬性不適用 –

使用重要！如果你想覆蓋內聯CSS：

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

來源

2016-07-05 12:16:53

更好的是...沒有內聯樣式。 – evolutionxbox

我同意你的看法，如果他有可能刪除內聯風格，這是一個更好的解決方案。 –

酷！我不知道！重要的覆蓋內聯風格！非常感謝！！ –

如何在打印版式中設置img html

回答

相關問題