BlurImageLoader sets container height to 150px

[Shooshte]

I am trying to integrate BlurImageLoader in the following way:

          <div className="tea-image-container">
            <BlurImageLoader
              src={teaType.image}
              preview={teaType.smallImage}
              fullCover={true}
              alt={teaType.header}/>
            <h1 className="title tea-image-title">&nbsp;&nbsp;{teaType.header}</h1>
          </div>

When I had the image as a standard image element, the height of the image was automatically set to the image width. So I had the image width set to 100%, and the image would resize to 1x1.

When I integrate the image in the above way, The container gets resized to 150px.

My container styles are set as following:

  position: relative;
  font-size: 0;
  width: 100%;

I am unable to pinpoint the issue, but you can reproduce it with the following repo(be careful to pull the branch issu#5): https://github.com/Shooshte/teaTimer/tree/issue%235

The relevant code is in the TeaInfo.component.jsx.

Let me know if you need more information, nad thanks for looking into this.

[MarkoCen]

I see your point. This issue caused by the SVG element cannot adjust its height correctly. Need to find a way to scale the SVG element when container height not specified.

Right now, the only alternative method I could think is explicitly specifying the height of its container .tea-image-container

[Shooshte]

Well the main problem with this is that my image is located inside of a responsive container - and I would like to keep the ration of the image 1:1.

I guess I could write a workaround that sets the height of the image every time the container is resized, but it would still be nice to have this out-of the box.

Anyway, thank ou for your time, and feel free to close the issue.

[ghost]

same problem here

[vanya2h]

+1 Request