title: Scale image until either X or Y is the same as the container and then crop the rest
body: <p>I am loading images in multiple places where the site theme will have them displayed in different sizes. I experimented with the CSS properties and found that I could scale the image using the height and width parameters and crop the image using position:relative and overflow:hidden.</p>
  
  <p>What I want to do though is a combination of that. To scale the image down until the width is the width of the container element or the height is the height of the container element (which ever comes first). Then crop the rest. </p>
  
  <p>Thus the image should be in proportion and also fill the container, regardless of shape.</p>
  
  <p>Any ideas?</p>
  
  <p>Marvellous</p>