css打印适应纸张_如何在网页中打印图像,适合纸张尺寸(A3,A4,A5等)?

I am currently using IE9 and media queries and I have no need to have this working from other browsers.

I tried using a set of rules like:

@page {

size: auto;

margin: 10mm 10mm 10mm 10mm;

}

//... rules to match the millimiters of all the A formats (A0, A1, A2, etc) including margins and tolerance

/* A4 210x297 mm */

@media print and (min-height: 266mm) and (max-height: 288mm) and

(min-width: 179mm) and (max-width: 201mm) {

.img_port {

height: 267mm !important;

}

}

// ...

it seems to be working but it is not reliable because the size height and the width values passed to the CSS seems to depend on the printer even if the A4 format is always selected.

What I want to ask is if there is any other possible way to obtain the same result (fitting the image on one page according to the paper size).

Thank you in advance.

解决方案

The long and short of printing in IE is that you will never be able to accurately control things like this.

Physically, printers have different capabilities when it comes to how much of the page is printable area. Then, you also have to deal with any settings that IE remembers from the last page the user printed such as zoom, margins, pages-per-page, etc.

After struggling with this for years, I have finally given up attempting control of what IE does with print pages and started treating my print stylesheets more like suggestions.

IE < 9 simply does not support page-break or @page in any meaningful way and, in my testing IE9 simply ignores almost all @page rules in favor of whatever settings the user last configured.

To suggest that IE print an image at the full width and full height of the page try the answer Landscape printing from HTML

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 flex 布局来实现将图片和文字整成一个盒子,并且将图片放在文字的左边。具体代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .product-qianduan { display: flex; align-items: center; gap: 20px; } .product-img1 img { width: 100%; } .a3 { flex: 1; } </style> </head> <body> <div class="product-qianduan"> <div class="product-img1"> <img src="./淘宝图片/QQ截图20230417104920.jpg" alt=""> </div> <div class="a3"> <div class="a1">Web前端开发工程师</div> <div class="a2">技术要求:</div> <div style="text-indent:2em;">对常用的一些JS框架了解,如jQuery,YUI等。掌握最基本的JavaScript计算方法编写。对目前互联网流行的网页制作方法(Web2.0)HTML+CSS,以及各大浏览器兼容性有很大的了解。对前沿技术(HTML5+CSSS3)的基本掌握。<span style="color:rgb(11, 245, 245)"><u>Web前端技术</u></span>你究竟掌握了多少...</div> <div class="a4">更新时间:2015年05月19日20点(已有323人点赞)</div> </div> </div> <div class="a5">相关技术文章8篇</div> </body> </html> ``` 在上述代码,我们将图片和文字放在一个名为 `product-qianduan` 的 div ,并使用 flex 布局来实现将它们整合在一起。其,`align-items: center` 属性使得图片和文字垂直居对齐,`gap: 20px` 属性设置图片和文字之间的间距为 20px。图片所在的 div 使用了类名为 `product-img1`,图片的宽度设置为 100%。文字所在的 div 使用了类名为 `a3`,`flex: 1` 属性使得它占据了剩余的所有可用空间,从而将图片和文字整合在一起。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值