CODEWITHSUNDEEP
htmlcssreactjs
Ashish Tuteja
Ashish Tuteja

Reputation: 168

Is Inline Styling in React causing my image to be shifted down?

I have a div inside which I am placing a circular image that has been scaled down. However, the image renders below the div (outside of it). The amount by which it shifts downwards is the same amount I've scaled it down by. i.e if it wasn't scaled down the top of the image lines up with div. I don't understand what's causing the image to be shifted down. I would appreciate any help!

function Artist(props){
  var scaleX = 150/props.artist.images[0].width ,scaleY = 150/props.artist.images[0].height;
  
  var imag = <img src={props.artist.images[0].url} style={{overflow : "hidden", transform : `scale(${scaleX}, ${scaleY})`, borderRadius : "50%"}}></img>
  return (
    <div className="artistRow">
      {imag}
    </div>
  );
  
}

image for reference: enter image description here

Upvotes: 0

Views: 35

Answers (1)

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

I think it's a transform-origin problem. For now, the center of the scaled-down image will be same as if it was not scaled, since by default the transform-origin is set to center center. Try to give to the image transform-origin: top left

Upvotes: 1

Related Questions