srcset 和打印（到纸）答案

【问题标题】：srcset and printing (to paper)srcset 和打印（到纸）
【发布时间】：2018-03-19 10:01:12
【问题描述】：

我有一个关于 srcset 和打印图像（到纸上）的问题。

假设根据屏幕尺寸需要满足三种图像尺寸：

$image_url_1, $image_url_2, $image_url_3, $image_url_4

第一个是原始大小。其他的宽度分别为 50%、33% 和 25%。对于小屏幕，$box-width-1 到$box-width-4 都设置为100%，所以我总是想显示$image_url_1。

对于较大的屏幕，$box-width-1 到 $box-width-4 的大小不同（50%、33% 和 25%），因此图像应与每个框大小匹配。

<picture>
  <source media="(max-width: 567px)" srcset="
    <?php 
      if ( $box_width == 'box-width-1' ) { echo $image_url_1; } 
      elseif ( $box_width == 'box-width-2' ) { echo $image_url_1; }
      elseif ( $box_width == 'box-width-3' ) { echo $image_url_1; }
      elseif ( $box_width == 'box-width-4' ) { echo $image_url_1; }
    ?>
  ">

  <source media="(min-width: 568px)" srcset="        
    <?php 
      if ( $box_width == 'box-width-1' ) { echo $image_url_1; } 
      elseif ( $box_width == 'box-width-2' ) { echo $image_url_2; }
      elseif ( $box_width == 'box-width-3' ) { echo $image_url_3; }
      elseif ( $box_width == 'box-width-4' ) { echo $image_url_4; }
    ?>
  ">
<img src="<?php echo $image_url_1; ?>">
</picture>

所有这些都可以正常工作（在 Firefox 中测试），但我也想将图像打印到纸上，使用具有不同图像大小的第二个 srcset。到目前为止，它只打印单个图像大小的版本。

有没有类似<source media="print" srcset="..."> 的东西。如果没有 - 我找不到 - 是否有另一种方法来满足打印的不同图像尺寸？

谢谢！

乔治

【问题讨论】：

这肯定取决于您的打印机页面大小，它使用哪个图像？
所以页面布局 DIN A4 类似于 max-width: 567px？以为它会比那更大，但我必须检查一下。感谢您的提示！
为了快速测试，我将最小/最大宽度设置为 1px，但它仍然只打印/pdf-ing 常规图像尺寸。

标签： css html printing srcset

【解决方案1】：

我对此进行了一些研究，您的建议似乎是实现您想要的正确方法：

<picture>
  <source srcset="mdn-logo-wide.png" media="print">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

不幸的是，似乎没有浏览器支持这一点。以下是Chromium 和Firefox 的问题。

这似乎是您不得不依赖 JavaScript 的一种情况。您可以在 this answer 中看到如何使用 JavaScript 进行打印，但我自己还没有尝试过。

【讨论】：