Responsive Design Portfolio using CSS grid, flexbox and clamp ()

Community feedback

• 

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  I don't know how many times you've tried to read .getBoundingClientRect() property, but I've noticed that if you select an image and keep on refreshing, sometimes you get width and height and sometimes you don't. That's because the image is not fully loaded every time that .getBoundingClientRect() function is called. Solution is to put load event on images, it will run when the image is fully loaded, and then to call .getBoundingClientRect() function. I tried that for one image only and it worked:

  const img = document.querySelector(".portfolio__carousel li img");
  
  img.addEventListener("load", e=>{
      console.log(e.target.getBoundingClientRect())
  })
  

  I hope that helped you a little bit...

  0