title: Is Inline Styling in React causing my image to be shifted down?
body: <p>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!</p>
  <pre><code>function Artist(props){
    var scaleX = 150/props.artist.images[0].width ,scaleY = 150/props.artist.images[0].height;
    
    var imag = &lt;img src={props.artist.images[0].url} style={{overflow : &quot;hidden&quot;, transform : `scale(${scaleX}, ${scaleY})`, borderRadius : &quot;50%&quot;}}&gt;&lt;/img&gt;
    return (
      &lt;div className=&quot;artistRow&quot;&gt;
        {imag}
      &lt;/div&gt;
    );
    
  }
  </code></pre>
  <p>image for reference:
  <a href="https://i.stack.imgur.com/4UMbi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4UMbi.png" alt="enter image description here" /></a></p>