title: Twitter Bootstrap responsive images with different sizes resizing unproportionaly
body: <p>I'm new using the img-responsive class on bootstrap, i have the following page:</p>
  
  <p><img src="https://i.stack.imgur.com/KpLJz.jpg" alt="enter image description here">
  I want the images to show there with the same proportions, for example like the images at the right. i added this CSS and apply the class to the image but when i resize the window the responsive resizing is not proportioned.</p>
  
  <pre><code>.imageClip{
      width:350px;
      height:255px;
      overflow:hidden;
  }
  </code></pre>
  
  <p>Example of resizing WITH the CSS added:</p>
  
  <p><img src="https://i.stack.imgur.com/bJJbT.jpg" alt="enter image description here"></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
  
        &lt;img class="img-responsive imageClip" src="{$servicio.med_ruta}"&gt;
  
        &lt;h3&gt;{$servicio.ser_nombre}&lt;/h3&gt;
        &lt;p&gt;{$servicio.ser_descripcion}&lt;/p&gt;
        &lt;a class="btn btn-link btn-sm pull-right"&gt;More &lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I would like to know if its a way to do this without the un proportioned resizing. Thank you</p>