Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

height of div would take equal to image height mean while image is loading. #77

Open
vishwakarmanikhil opened this issue Sep 16, 2021 · 4 comments

Comments

@vishwakarmanikhil
Copy link

It is not the problem, for which I am creating an issue. My concern is simple, there is some feature to which we can keep the height of the container the same as the height of the image in meanwhile it is image is loading. Like div loader effect.

image

@vishwakarmanikhil vishwakarmanikhil changed the title height of div would take of image while loading image. height of div would take equal to image height mean while image is loading. Sep 16, 2021
@samwyzz
Copy link

samwyzz commented Sep 19, 2021

For this, one way is the bottom padding technique. This will of course require knowing before hand the width and height of the image to calculate the images aspect ratio in percent. That is, how much percent is the images height compared to its width. For example, say, an image Is a "tall" image, then its height would be maybe 150% more than its width. This is just an example, and the dimensions will of course vary from image to image.

We apply a padding bottom to a container div which contains the image element, calculated from the images width and height . So while the image has not loaded the height of the container div is proportionate to the actual image when it has loaded.

function myImageComponent({imageWidth, imageHeight}){
   const aspectRatioPercent = (imageHeight/imageWidth)*100;
   return (
   <div style={{
      paddingBottom: `${ aspectRatioPercent }%`,
      backgroundColor: "red"
     }}
   >
      <img src={...} />
   </div>
   )
}

The following articles explain this concept in more depth:
https://www.andyshora.com/css-image-container-padding-hack.html
https://css-tricks.com/aspect-ratio-boxes/

A little short of time atm, this example is a little bit rushed and im sure there are things that can be improved. If this is useful and need any help, feel free to ask.

Edit: in this example the img element must be positioned absolutely otherwise it will add to the height of the cell once loaded

@vishwakarmanikhil
Copy link
Author

Thank you @samwyzz , I will try this.

@samwyzz
Copy link

samwyzz commented Sep 21, 2021

@vishwakarmanikhil
As it showed in the example above before editing, I have clearly never been a math expert :p. And to add I was severely burned-out when writing my comment. Now that I look at it, the hook I had created above had a redundant calculation of the image ratio. The calculate aspect ratio package is not necessary since the width and height of the image are the aspect ratio.

The padding percentage can simply be calculated using the following formula (Image Height / Image Width) * 100. It is still required to know the width and height before hand.

I have updated my answer with the corrections.

Cheers!

@vishwakarmanikhil
Copy link
Author

@samwyzz Thank you for an update. I have tried your solution but It was not what I am looking for. Because if for small things we start using the libraries then it increases the build size anyway. I have found this on stack overflow and use that. But anyway you have elaborate your solution problem clearly. which helps me to found the solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants