时间戳

首页 > 解决方案 > Chrome、Firefox 和 Explorer 中的图片、srcset 和 css

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

问题描述

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

<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 并显示相应的图像。这种行为让我既惊讶又高兴，因为我在任何地方都没有发现任何文件表明会发生这种情况。

在资源管理器中，显示的是 SomePicture - 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 中的媒体查询？

标签： cssimagemedia-queriessrcset

解决方案

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

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

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

推荐阅读