Question

我有关于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="...">的内容。如果没有 - 我找不到它 - 是否有另一种方法可以满足不同图像尺寸的打印效果？

谢谢！

乔治

Answer 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进行打印，但是我自己还没有尝试过。

srcset和打印（到纸）

1 个答案: