title: Cropping image as a percentage with CSS
body: <p>I want to resize an image so that it takes up 100% width of the page and 40% of its height but without distorting the image's natural ratios.</p>
  
  <p>I came across <a href="https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped">this tutorial</a> but I can't seem to get it to work with percentage values rather than just pixel or em values.</p>
  
  <p>Any ideas how this might be done? Much thanks.</p>