图像在打印预览中调整大小答案

【问题标题】：Images are getting resized in Print Preview图像在打印预览中调整大小
【发布时间】：2012-09-25 08:17:41
【问题描述】：

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

img {max-width:100%; }

我希望 Shrink 中的图像尺寸相同并且可以 100% 缩放。

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

【问题讨论】：

使用打印特定的@media queries 或media="print" 样式表
@Mr.Alien - 我已经有一个包含上述规则的打印 css。
不要使用max-width尝试只使用width

标签： html css print-css

【解决方案1】：

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

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

@media print {
      .logo-container,
      .img-wrapper,
      img {
        max-height: none !important;
        height: 100% !important;
}

【讨论】：

【解决方案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;
    }
}

希望有所帮助，祝你好运。

【讨论】：

【解决方案3】：

你也可以试试这个。

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

【讨论】：