Chrome、Firefox 和 Explorer 中的图片、srcset 和 css

Posted 2023-03-06

【中文标题】Chrome、Firefox 和 Explorer 中的图片、srcset 和 css

【英文标题】：picture, srcset and css in Chrome, Firefox, and Explorer

【发布时间】：2019-04-13 07:10:22

【问题描述】：

在 Chrome (70.0.3538.77)、Firefox (63.0.1) 和 Internet Explorer ( 11.0.9600.19155)

<style type="text/css">
  .ralphBackground 
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: opacity 5.5s;
  

  .ralphFadeIn 
    opacity: 0;
    transition: opacity 5.5s;
  
</style>

<div>
  <picture>
    <source srcset="/assets/root/360x740-text/740x360-text.png" media="(orientation: landscape)">
    <source srcset="/assets/root/360x740-text/360x740-text.png" media="(orientation: portrait)">
    <img class="ralphBackground" id="ralphBackgroundId" src="/assets/root/SomePicture - 2048x1367.png" />
  </picture>
</div>

<div> 
<script language="javascript" type="text/javascript">
    const ralphBackground = document.getElementById('ralphBackgroundId');


    $( window ).on('load', function() 
      ralphBackground.style.opacity = '0.55';
    );
  </script>
</div>

在 Chrome 和 Firefox 中，css 类 ralphBackground 会根据窗口的方向（即大小）应用于 360x740-text.png 或 740x360-text.png 的图像，并显示相应的图像。这种行为让我既惊讶又高兴，因为我在任何地方都没有发现任何文件表明会发生这种情况。

在资源管理器中，它是 一些图片 - 2048x1367.png 显示的图像。

我从https://www.diffuse.nl/blog/creating-responsive-images-with-srcset-and-sizes 引用以下内容：

您可以看到 src 属性仍然是必需的。这是一个后备 对于不支持 srcset 和 size 的浏览器。我猜你是 毫不奇怪，这个浏览器竟然是 Internet Explorer。

所以我的问题是： 1）我想要的行为（将css应用于相关图像）是可能改变的未记录行为吗？还是它记录在某处而我只是没有找到文档？ 2) 有什么方法可以欺负 Explorer 让其按我的意愿行事吗？ 3) Explorer 是否支持 srcset 中的媒体查询？

【参考方案1】：

1) 我也很惊讶 img 类应用了图片源。也许是因为它在同一个图片标签内？我查看了各种文档，但找不到任何相关内容。

2) 不幸的是，IE 不会使用 srcset。看： https://caniuse.com/#feat=srcset

3) IE 不会尊重 srcset 中的任何内容。