title: Setting user avatar in specific size, without breaking layout
body: <p>I want to make an single folder with user's avatar showing their small avatar (resized) and their big avatar (in their normal size). This is my code.</p>
  
  <pre><code>&lt;span class="prfil-img"&gt;&lt;img src="images/avatarsmall/&lt;?php echo $id ?&gt;.jpg" alt=""&gt; &lt;/span&gt; 
  
  
  &lt;div class="text-center vd_info-parent"&gt; &lt;img alt="example image" src="https://imgur.com/I80W1Q0.png"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>The text-center   div  is big avatar, and I will change it with echo later, but, I can't manage to modify small avatar's size, only if I upload it 60x60, becaus if i set it manually with height  it shows in another place. </p>
  
  <p>ex</p>
  
  <pre><code>&lt;span class="prfil-img"&gt;&lt;img src="images/avatarsmall/&lt;?php echo $id ?&gt;.jpg" alt="" height="60" width="60"&gt; &lt;/span&gt; 
  </code></pre>
  
  <p>this is how it looks with height and width option, </p>
  
  <p><a href="https://i.stack.imgur.com/xbp94.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xbp94.png" alt="enter image description here"></a></p>
  
  <p>This is how it looks if i upload it manually with 60x60 size :</p>
  
  <p><a href="https://i.stack.imgur.com/nbSKY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nbSKY.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/odtUz.png" rel="nofollow noreferrer">How it looks now without resize, its manually uploaded with 60x60, so it sets the big avatar too on 60x60</a></p>
  
  <p><a href="https://i.stack.imgur.com/0HOu9.png" rel="nofollow noreferrer">How should look</a></p>