Responsive Image placeholders

[mollybrowntown]

Hi there,

I'd like to suggest support for responsive images (ie, on windows expanding). The issue I face is that the placeholder Img only shows up when a width and height are passed into the component props. If I only want the width of 100% to be set on my images to respond to differing window sizes, the placeholder doesn't show up. Also, as an alternative, if I set the CSS for the placeholder blur image to contain a height, the height of the span remains after the load. So unwanted content changes occur.

[samatcd]

Yes, agreed! In most cases this would be achieved by removing the explicit width / height on the span.lazy-load-image-background element and having this element expand to full container width & height. Setting the passed image width / height attributes on the img tag as it does now, will allow the browser to scale images properly.

This could potentially be accomplished by setting a responsive prop or something similar on the LazyLoadImage component.