title: Image is getting shrink-ed after refresh
body: <p>In an employee detail page am showing a image of the employee in certain size , when the page is get refresh the size of the image getting shrink-ed.</p>
  
  <pre><code>     &lt;Col xs="12" sm="2"&gt;
          &lt;img
            src={this.state.image==='' ? loader : this.state.image}
            className="img-avatar avatar"
          /&gt;
       &lt;/Col&gt;
  </code></pre>
  
  <p>In css , </p>
  
  <pre><code>    .avatar{
    width: 135px;
    height: 135px;
    border: 0.18em solid #3f51b5;
  }
  </code></pre>
  
  <p>state initialization and updation :</p>
  
  <pre><code>  this.state = { image: '' };
  
  componentDidMount() {
  const employees = this.props.employees;
  let employee = {};
  let employeeID = this.props.match.params.id;
  employee = employees[employeeID];
  setTimeout(() =&gt; {
    this.setState({
      image: employee.profilePicture
    });
  }, 500);
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://i.stack.imgur.com/sEUbO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEUbO.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Qfdmo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qfdmo.png" alt="enter image description here"></a></p>