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

在Chrome（70.0.3538.77）、Firefox（63.0.1）和Internet Explorer（11.0.9600.19155）中，我看到我的css（即ralphBackground类）应用于以下“艺术指导”代码中的图像时，我既惊讶又高兴

拉尔夫先生的背景{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：-1；
宽度：100%；
身高：100%；
过渡：不透明度5.5s；
}
拉尔夫·法丹先生{
不透明度：0；
过渡：不透明度5.5s；
}
const ralphBackground=document.getElementById（'ralphBackgroundId'）；
$（窗口）.on（'load'，function（）{
ralphBackground.style.opacity='0.55'；
});

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

在Explorer中，它是 SomePicture-2048x1367.png 显示的图像

我引述以下内容：

您可以看到src属性仍然是必需的。这是一种退路 对于不支持srcset和大小的浏览器。我想你是 毫不奇怪，这个浏览器竟然是Internet Explorer

因此，我的问题是：
1） 我想要的行为（将css应用于相关图像）是否有可能改变？或者是在某个地方有文档记录，而我只是没有找到文档？
2） 有没有什么方法可以欺负探险家，让他按照我的意愿行事？
3） Explorer支持srcset中的媒体查询吗？

1）img类应用了图片源，这也让我感到惊讶。也许是因为它在同一个图片标签内？我查阅了各种文件，但找不到任何关于这方面的信息

2） 不幸的是，没有，IE将不使用srcset。见：

3） IE不会尊重任何东西

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