Описание тега picturefill

Элемент изображения и связанные с ним функции являются стандартными функциями HTML W3C, которые позволяют веб-разработчикам доставлять соответствующее изображение каждому пользователю в зависимости от множества условий, таких как размер экрана, размер области просмотра, разрешение экрана и т. Д. Picturefill - это файл JavaScript (или, если быть более конкретным, polyfill), который обеспечивает поддержку элемента изображения и связанных функций в браузерах, которые еще не поддерживают их, так что вы можете начать использовать их сегодня!
2 ответа

Внедрение WordPress и Picturefill

Я пытаюсь реализовать адаптивное изображение в моей теме WordPress. Доступно несколько плагинов, но те, которые я пробовал, испортили мой макет. В основном я хотел бы заменить все существующие изображения (не только избранные изображения или эскизы)…
14 июл '15 в 12:56
1 ответ

Почему не-Retina Mac загружает 2x версию элемента изображения?

Я использую picturefill 2.0 и элемент изображения с некоторыми динамическими URL. <picture alt="<?php the_title(); ?>" title="<?php the_title(); ?>"> <source srcset="<?php echo $tablet; ?>, <?php echo $tablet; ?> 2x"…
1 ответ

При использовании <source>отображаются только изображения по умолчанию

Я пытаюсь использовать &lt;picture&gt; а также &lt;source&gt; элементы, чтобы обеспечить некоторые адаптивные изображения для моего сайта. Моя проблема в том, что показывает только изображение по умолчанию. Я попытался перезагрузить страницу, исполь…
25 окт '16 в 21:02
1 ответ

HTML-элемент изображения, не поддерживающий небольшой медиа-запрос

У меня есть такая вещь: &lt;picture&gt; &lt;source media="(min-width:1200)" srcset="big.jpg"&gt; &lt;source media="(min-width:840)" srcset="small.jpg"&gt; &lt;img srcset="big.jpg" alt="Test" /&gt; &lt;/picture&gt; Я также использую picturefill. Моя …
1 ответ

Может ли Picturefill замедлить работу браузера на стороне клиента из-за использования RegEx для получения правильного изображения?

В настоящее время мы реализуем Picturefill (версия 2.2.0) на нашем сайте. Элемент изображения выглядит так: &lt;picture&gt; &lt;source media="{query_size1}" srcset="/images/size1.jpg"&gt;&lt;/source&gt; &lt;source media="{query_size2}" srcset="/imag…
07 янв '15 в 09:03
0 ответов

Залить изображение с VueRouter на IE11?

Мне нужно поддерживать отзывчивый образ на IE11. Таким образом, мне нужно заполнить изображение. Проблема в том, что он работает только на первой странице (когда сайт загружается впервые). picturefill не работает на последующих страницах при навигац…
25 окт '18 в 18:28
1 ответ

Выберите изображение элемента изображения в Chrome

У меня есть необходимость повторно использовать визуализированное изображение элемента изображения. Существует ли прямой способ использования javascript для доступа к пути к файлу изображения, отображаемому chrome / opera, без необходимости повторят…
17 дек '14 в 16:41
1 ответ

Адаптивные изображения: img srcset + Bootstrap, загружается изображение неправильного размера

Я использую Bootstrap с адаптивными изображениями. Я хочу оптимизировать время загрузки, предлагая браузерам изображения разных размеров. Согласно этой статье, простой подход к srcset, подобный этому, хорош для того, чтобы позволить браузеру выбрать…
0 ответов

Адаптивные изображения с веб-и художественным направлением

Я пытаюсь создать пример для тега изображения художественного направления, используя webP в качестве основного формата, png, если webP не поддерживается (все еще в теге picture), и тег png img для браузеров, не поддерживающих изображение. Я собираюс…
18 дек '18 в 14:27
1 ответ

Picturefill не работает в IE10 при очистке кеша

Я использую элементы с Picturefill для кросс-браузерной поддержки. В IE10 (это хорошо в 9 и 11) он прекрасно работает при обычной загрузке страницы, но изображение не отображается после сочетания клавиш Ctrl+ F5. (Если я затем открою инструменты раз…
02 ноя '15 в 17:04
1 ответ

Как обрезать / изменить размер фона / границы изображения с помощью GraphicsMagick

У меня есть несколько изображений в большом наборе изображений, которые имеют белую (или черную) рамку, которая окружает само изображение. Как я могу... Обрезать изображение до размера без указанного фона / границы Измените размер изображения, чтобы…
1 ответ

Два изображения с одинаковой высотой физического пикселя имеют смещение по высоте.

Я построил следующее в Singularity 1/3 широкого изображения рядом с 2/3 широким изображением, а в следующей строке наоборот. Изображения подаются с картинкой. Но моя проблема в том, что когда я сужаю область просмотра вниз от максимальной ширины кон…
14 мар '14 в 16:12
0 ответов

Принимая во внимание ширину полосы прокрутки при использовании Picturefill v1.2

Я использую Picturefill 1.2 и у меня возникают проблемы с его изменением размера на разных платформах / браузерах из-за наличия полосы прокрутки. У меня есть следующий код: &lt;span data-picture data-alt="Image"&gt; &lt;span data-src="images/banner-…
05 дек '14 в 11:13
1 ответ

При использовании изображения, источника и srcset, как проверить, какой src был загружен? (img.src пусто)

Я использую picture элемент с sourceвыбрать, какое изображение загрузить. И пока я могу добавить load Слушатель, я не могу понять, какое изображение было загружено как img тега src атрибут и свойство оба пусты, даже когда загружены! &lt;picture&gt; …
1 ответ

Devexpress просмотра документов заполнить страницу в conatiner

У меня есть DevExpress raport.cs и контейнер DocumentViewer. Я хочу, как заполнить отображаемую страницу в контейнер?
21 окт '15 в 11:11
1 ответ

Элемент изображения не работает в angular2 и firefox

У меня есть компонент "логотип", который по существу записывает элемент изображения. Шаблон выглядит так: &lt;picture class="logo"&gt; &lt;source srcset="{{srcsetMobile}}" media="(max-width: 767px)"&gt; &lt;source srcset="{{srcsetDesktop}}" media="(…
12 июл '16 в 15:21
1 ответ

Royalslider и Picturefill.js

Я создаю сайт, который имеет HTML-версию Royal Slider. Я хочу использовать picturefill для загрузки изображения, оптимизированного для текущего просматриваемого разрешения. Но у меня проблемы с тем, чтобы заставить его работать. Это работает, пока я…
27 июн '13 в 09:24
2 ответа

Есть ли способ объединить библиотеку lazyload js с Picturefill?

Мне интересно, как бы вы включили lazyload.js в Picturefill, когда синтаксис изображения lazyload требует тега img вместе с data-original, а синтаксис Picturefill не имеет места для них. Например, это моя разметка для изображения с использованием Pi…
10 дек '13 в 23:00
1 ответ

Лучшие стандартные размеры изображений для различной ширины экранов для сайта

Я использую библиотеку picturefill.js, чтобы получить одно и то же изображение с разными размерами на разной ширине экрана. Дилемма заключается в том, какое количество изображений я должен создать, имея в виду все мобильные устройства, планшеты и ко…
30 июн '15 в 13:29
1 ответ

Изменение img в зависимости от размера окна

Я хочу, чтобы мой сайт VS2015 отображал более горизонтальное изображение, созданное мной на настольном компьютере, и более вертикальное изображение на мобильном устройстве. У меня есть два отдельных обрезанных изображения, чтобы избежать искажения р…
31 дек '16 в 02:04