Mark Jaquith
Sep 6, 2018 · 1 min read

Thanks so much for this, Linas! I was trying to get image placeholders to work on an infinite scroll Pinterest-style layout, with photos of varying heights (sometimes proportionally height-downsized due to the image being wider than the column), and I found that there was no pixel-perfect way to render a DIV placeholder that took up the same amount of space as the image would. Even the popular padding-bottom method where you assign a padding bottom according to the ratio of the height/width of the image (padding-bottom: 200% for an image twice as tall as wide) wasn’t working, because browsers were pixel-rounding in unpredictable ways. So there would be a grey 1px “bleed-through” under some images, or they would jerk around as they loaded. Your solution of dynamically generating an SVG of the desired dimensions is brilliant, because the browser resizes it the exact same way as it will round the eventual (real) image.

    Mark Jaquith

    Written by

    I make WordPress. Web publishing is my passion.