Questions tagged [picturefill]

The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!

79 questions
0
votes
1 answer

Best standard Image Sizes for different width of screens for website

I am using picturefill.js library to pull up same image with different sizes on different width of screen. Dilemma is that what should be the number of images should I create by keeping in mind of all mobile, tablet, desktop ? By doing this I want…
Suraj
  • 576
  • 2
  • 10
  • 37
0
votes
1 answer
0
votes
1 answer

Media selectors not working in sizes attribute for picture html5 tag

I am trying to use the new picture tag to have a responsive version of my pictures.
data
  • 2,493
  • 2
  • 19
  • 21
0
votes
4 answers

Responsive background images

Currently I'm working on building a solution for having responsive background images set via JavaScript. I am using Picturefill to create cross-browser support. What do I need? There is an element on my page which needs a pretty little background…
0
votes
1 answer

Need help on this Picturefill srcset

I have the following laravel code:
resting
  • 16,287
  • 16
  • 59
  • 90
0
votes
1 answer

Can Picturefill slow the browser down on clientside because of used RegEx to get correct image?

we are implementing Picturefill (version 2.2.0) at the moment in our site. The picture element look like this:
steven
  • 383
  • 1
  • 3
  • 20
0
votes
1 answer

picturefill element inside a polymer web component loses container dimensions

I'm trying to use the element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as is not getting any dimensions from the…
scottnath
  • 71
  • 6
0
votes
2 answers

Picturefill without src attribute?

Just some beginner's questions around the Picturefill polyfill: I've noticed a short flicker in Firefox (33) and Safari (7.1) when I use a src attribute. These Browsers make an extra HTTP request. This is my code:
gregory
  • 1,140
  • 2
  • 11
  • 27
0
votes
1 answer

img srcset + sizes picturefill for responsive

I have a site with a 12 column layout and I'm trying to figure out to use the srcset and sizes attributes correctly for matching my design. I have a sidebox which spans 3 columns in desktop, but in tablet and mobile sizes it spans 12 cols (100%…
kasperwf
  • 277
  • 2
  • 4
  • 16
0
votes
1 answer

Canvas createPattern() and fill() rectangle rendering on mouse move

Iv`e created canvas pointer error. It shows a target to desired location (mouse position): http://jsfiddle.net/conmute/rk276q3g/ The problem is in Firefox rendering, (move mouse very fast): http://jsfiddle.net/conmute/rk276q3g/1/ rectangle acts…
Roman M. Koss
  • 970
  • 1
  • 15
  • 33
0
votes
1 answer

Combining Picturefill 2.1 with any lazyload plugin

I'm trying to combine Picturefill 2.1 with any available lazy load plugin, but I had no success yet. Most of the code I found on Google is for Picturefill 1. Does anyone here has done this before and could help me? Picturefill is working just fine,…
Ju Nogueira
  • 8,435
  • 2
  • 29
  • 33
0
votes
1 answer

How do I crop/resize a background/border out of an image with GraphicsMagick

I have some images in a large set of images that have a white (or black) border that surrounds the image itself. How can I... Crop the image to a size without said background/border Resize the image to fill a given output size centered. For…
Tracker1
  • 19,103
  • 12
  • 80
  • 106
0
votes
1 answer

Chrome Canary, Picturefill and the missing src attribute

I've been working on an implementation of RoyalSlider and Picturefill, which has been working really well in all browsers. However, I've noticed that the latest Chrome Canary no longer adds the correct src attribute to an img tag when picturefill…
patrickzdb
  • 928
  • 1
  • 10
  • 26
0
votes
1 answer

Picturefill 2 IMG height jumps on page load

When using Picturefill 2 I'm getting layout jumping on images while the page is loading, for example, when you don't specify height on a normal image. Is this expected with Picturefill and is there a way around this problem? Thanks.
0
votes
2 answers

How to catch when image is loaded with javascript by a plugin (jquery + picturefill)

Here is a little sample: http://cdpn.io/Gpdyx It contains a PictireFill script from: https://github.com/scottjehl/picturefill and small jQuery code that tries to set same height of .copy element as the image height. The problem is when PictureFill…
Marcin Bobowski
  • 1,745
  • 2
  • 19
  • 35