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.

[jotacodestudio]

Thanks for bringing up this issue. I'm wondering if this solution could fit your needs:

<LoadImage
  alt={imageAlt}
  placeholder={
    <div
      style={{
        aspectRatio: "1/1",
        display: "block",
        width: "100%",
      }}
    ></div>
  }
  src={imageSrc}
  wrapperProps={{
    style: {
      display: "block",
      width: "100%"
    }
  }}
/>

react-lazy-load-image-component sets the display property of the wrapper and placeholder to inline-block. This is to mimic how an image would be laid out on the page. However, you can set them to 100% width using the wrapperProps and placeholder props.