изображение, srcset и css в Chrome, Firefox и Explorer - PullRequest
Новая
       27

изображение, srcset и css в Chrome, Firefox и Explorer

0 голосов
/ 09 ноября 2018

Я был удивлен и обрадован, увидев, что мой css (т.е. класс ralphBackground) применен к изображению в следующем коде «художественного направления» в 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 в зависимости от ориентации (то есть размера) окна и отображается соответствующее изображение. Такое поведение удивило и восхитило меня, потому что я нигде не нашел никаких документов, говорящих, что это произойдет.

В Проводнике это SomePicture - 2048x1367.png изображение, которое отображается.

Я цитирую следующее из https://www.diffuse.nl/blog/creating-responsive-images-with-srcset-and-sizes:

Вы можете видеть, что атрибут src все еще является обязательным. Это запасной вариант для браузера, который не поддерживает srcset и размеры. Я думаю ты не удивлен, что этот браузер оказался Internet Explorer.

Итак, мои вопросы:
1) Поведение, которое я хочу (применение css к соответствующему изображению), недокументированное поведение, которое может измениться? Или это где-то задокументировано, а я просто не нашел документацию?
2) Есть ли способ заставить Исследователя вести себя так, как я хочу?
3) Поддерживает ли Explorer медиазапросы в srcset?

1 Ответ

0 голосов
/ 08 января 2019

1) Я также удивлен, что класс img применил источник изображения.Возможно, потому что это находится в пределах того же тега изображения?Я смотрю в различных документах и ​​ничего не могу найти по этому поводу.

2) К сожалению, нет, IE не будет использовать srcset.См .: https://caniuse.com/#feat=srcset

3) IE не будет ничего уважать в srcset.

...