2

我的网页上有几张图像（不是背景图像），当我看到 100% 比例的打印预览时，图像看起来不错，但我的问题是当我使用缩小以适应比例进行打印预览时，所有图像都来了比实际尺寸小。我没有在 IMG 标签上提供任何宽度或高度属性，所以我假设在打印预览中它会在它们出现在屏幕上时加载。我在 IMG 的打印媒体中使用了下面的 css，但它没有用

img {max-width:100%; }

我期望 Shrink 中的相同图像尺寸适合并 100% 缩放。

这可能吗？我在打印 css 中遗漏了什么吗？请指教。

4

3 回答 3

4

在处理我的项目时，当我需要在打印预览中获取图像的原始大小时，我必须使用!important.否则，它不会覆盖最初为页面上的图像定义的样式。

我还必须修改图像容器的高度：

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}
于 2019-05-16T06:51:53.177 回答
2

你有你的图像在“容器”或“div”等吗？您应该为它们创建打印样式，而不仅仅是为 img 元素。

我建议在 screen 和 print 的元素上使用相同的样式，就像这样（这是我的 print.css）：

/*How they look like on the print preview*/
@media print {
    #poweredbyLogo{
        width:213px;
    }
    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }

    .col-md-6.a1{
        background-color: #0000f6!important;
    }
    .col-md-6.a2{
        background-color: #d3d3d3!important;
    }
}
/*How they look like on the screen*/
@media screen {
    #poweredbyLogo{
        width:47%;
    }

    #logoframe{
        height:80px;
        margin-top:6px;
    }

    .space{
        padding-left:20px;
    }
}

希望有帮助，祝你好运。

于 2016-06-02T06:14:16.400 回答
1

Also you can try this.

<img class="application-logo res-media" width="65" height="65">


@media screen {
    .application-logo{
        width: 65px !important;
        height: 60px !important;
        cursor: pointer;
        margin: 25px;
    }
}

@media print {
    .application-logo, ._imgcont, img {
        max-height: none !important;
        height: 65px !important;
    }
}
于 2021-08-05T17:04:57.170 回答