Getting real screen width in div / image pixels using Three.js and CSS3DRenderer

Really struggled with this. I have a program that uses the CSS3D Renderer of Three.js and I am trying to get the projected "real" screen width in pixels of a div (which contains one image).

I tried using getBoundingClientRect () on the image, but the width and height values ​​returned from this function are not correct. I guess it has to do with perspective.

I also tried this method, which gives me the exact coordinates of the center and is included in the message mrdoob: qaru.site/questions/200533 / ...

var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;

var projector = new THREE.Projector();
var vector = projector.projectVector( object.matrixWorld.getPosition().clone(), this.camera );

vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = -( vector.y * heightHalf ) + heightHalf;

      

        
        
        
      

    

Unfortunately, all the methods I find for getting the top, left, or any corner of an object use geometry objects that CSS3DObject does not use (i.e. getting a vector of corner vertices and projecting those ref vectors: stack overflow / ... ).

Does anyone know how to do this? To be brief, I would just like to get the actual screen size of a div (which fits snugly against its img) in a Three.js CSS3D scene. In the end, I would like to determine if the camera image has changed more than its original pixel size.

Thank!