title: How to display image of any size in a fixed size 100x100 div?
body: <p>I want to display image of any size (different width and height) in a fixed size (100px by 100px) div without changing its aspect ratio. I also want to align the image to the center inside the div. I worked on it but image with different width and height (6th) is not coming in center unless I change its aspect ratio.</p>
  
  <pre><code>&lt;html&gt;        
      &lt;style&gt;
          .A{
              border:1px dotted black;
              display:inline-block;
          }
  
         .B{
              border:1px solid black;
              display:inline-block;
              width: 100px;
              height:100px;
              overflow:hidden;
          }
  
          .C{
              border:1px solid black;
              display:inline-block;
              width: 100px;
              height:100px;
              overflow:hidden;
          }
      &lt;/style&gt;
  
      1
      &lt;div class="A"&gt; 
          &lt;img src="man-profile.png"&gt;
      &lt;/div&gt;
  
      2
      &lt;div class="B"&gt;
          &lt;img src="man-profile.png"&gt;
      &lt;/div&gt;
  
      3
      &lt;div class="B"&gt;
          &lt;img src="man-profile.png" style="width:100;"&gt;
      &lt;/div&gt;
  
      4
      &lt;div class="C"&gt;
          &lt;img src="picture.png" style="width:100;"&gt;
      &lt;/div&gt;
  
      5
      &lt;div class="C"&gt;
          &lt;img src="picture.png" style="height:100;"&gt;
      &lt;/div&gt;
  
      6
      &lt;div class="C"&gt;
          &lt;img src="picture.png" style="height:100; width:100%"&gt;
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Picture attached below:</p>
  
  <p><a href="https://i.stack.imgur.com/mf93f.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mf93f.png" alt="enter image description here"></a></p>