title: How to trim off Image in CSS?
body: <p>Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the <code>width="50px"</code> and <code>height="100px"</code>.</p>
  
  <p>ok if I do</p>
  
  <pre><code>.myImage{
     width:50px;
     height:100px;
  }
  </code></pre>
  
  <p>then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have <code>width:50px</code> then if the <code>height&gt;100px</code>, then CSS will trim off the bottom. 
  Ok, let see this example, user inserted a big image with <code>width=150px</code> and <code>height=600px</code>. So if I reduce the width to <code>50px</code>, the the height will be <code>200px</code>. I want to cut the bottom of the image so it will show only <code>(w: 50px, h: 100px)</code> see the picture:</p>
  
  <p><img src="https://i.stack.imgur.com/RdOR5.png" alt="enter image description here"></p>
  
  <p>So how to do that?</p>