Question

我正在使用HTML和CSS构建报告。我正在处理在打印时跨页重复的标题。为了实现这一点，我正在使用@page属性，尤其是尝试将图像插入@ top-right。参见下面的CSS：

 @page {     
    @top-right {
        content: url('/home/resources/logo.jpg');
        border-bottom: .75px solid black;
        border-collapse: collapse;
        width:25%;
        border-spacing:0;
    }

问题是图像很大。如果这是HTML中的<img>，则将其大小设置为：

img.logo { height: 25px; width: 100px; }

但是，由于图像是通过url()引入的，因此我无法执行此操作。有谁知道如何控制图像的大小？

有关完整信息，我正在使用WeasyPrint将HTML / CSS转换为PDF。

Answer 1

您可以使用CSS中的“ background-size”属性以不同的方式“覆盖”或“包含”容器的尺寸：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover-通过成比例地增长并可能被修剪来填充空间
包含-通过按比例增长而不被裁剪填充空间

.box { 宽度：100px; 高度：100px; background-image：url（'/ home / resources / logo.jpg'）; 背景大小：cover; }

浏览器的默认设置可能会阻止打印背景图像。在这种情况下，您可以按照以下建议强制打印图像：

How can I force browsers to print background images in CSS?

如果您不想使用此技巧，则可以使用content属性覆盖元素的内容来解决问题。您的内容框的大小必须根据图像的比例进行调整，以便打印和变形的图像。

.box {
    width:100px;
    height:100px;
    content:url('/home/resources/logo.jpg');
}

有关实时示例，请参见此JS Bin： http://jsbin.com/henogud/edit?html,css,output

Answer 2

您不能使用<img>，但仍然可以使用background-size。也许是这样的：

background-size: 25px 100px; /* background-size: height width */

控制图片大小@ top-right css

2 个答案: