Блог

Я использовал <picture> элемент, чтобы сделать изображение отзывчивым в зависимости от размеров экрана. Он отлично работает в большинстве веб-браузеров, кроме Safari. В веб-браузере Safari мне приходится обновлять страницу каждый раз, чтобы увидеть ожидаемые результаты.

Чтобы устранить эту проблему, я добавил polyfill со следующего сайта и следовал инструкциям: http://scottjehl.github.io/picturefill / но это не решило проблему.

Будем признательны за любую помощь по этому вопросу!

Вот разметка <picture> элемента:

 <picture>
  <source media="(min-width: 600px)" srcset="images/image-lrg.jpg" />
  <img src="images/image-smll.jpg" alt="image of laptop" />
</picture>
 

 <picture>
   <source media="(min-width: 600px)" srcset="https://www.w3schools.com/css/img_lights.jpg" />
   <img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" />
</picture> 

Прочитайте о URL: https://developer.mozilla.org/ru-US/docs/Learn/Common_questions/What_is_a_URL

Прочитайте о совместимости с браузерами — <picture> : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#browser_compatibility