title: max-height AND max-width with CSS only
body: <p>First post for me here. </p>
  
  <p>I'm using a div to crop thumbnail images all in the same proportions (180wx170h). I'm getting stuck when dealing with portrait as well as landscape images. If am using this which is fine for portrait style images:  </p>
  
  <pre><code>.crop img {max-height:170px; width:auto} 
  </code></pre>
  
  <p>.. and is fine for landscape style images:</p>
  
  <pre><code>.crop img {max-width:180px; height: auto;} is fine for landscape style images.  
  </code></pre>
  
  <p>So I basically want to crop the sides if landscape and top/bottom if portrait. Kind of like a prioritized max-height and max-width.</p>
  
  <p>I know this could be done easily with PHP but I really only know CSS so that would be my first preference.</p>
  
  <p>I need to maintain the aspect ratio of the image.</p>