How to get image size or div size when it's responsive in Reactjs-CodePudding

I'm trying to customize my slider images in Reactjs. It's almost done so far but I'm facing a problem, that is when images width = 920px (fixed), I just have to do logic to make animation like: (count variable is just index of the current slide)

            sliderRef.current.style.transform = `translate(count * - 920)}px)`;

But now I'm making it responsive so the image size will be rendered and the image's width will be not 920px and the logic is not right anymore. So I wonder, is there any way I can get an a responsive image width to make an animation???

CodePudding user response：

You can apply the same animation without regarding the size, and that it will always play that animation.

Following method is to use the js to apply CSS based on the width and height.

.image{
     transform: translate(100px, 200px);

}

<img src "your-image" class = ".image">
</img>

let img = new Image();

img.onload = function(){
  let height = img.height;
  let width = img.width;

  // or you can set the class att to the image and apply the animation base on this
}

img.src = url;