title: How to "crop" a rectangular image into a square with CSS?
body: <p>I know that it is impossible to actually modify an image with CSS, which is why I put crop in quotes. </p>
  
  <p>What I'd like to do is take rectangular images and use CSS to make them appear square without distorting the image at all.</p>
  
  <p>I'd basically like to turn this:</p>
  
  <p><img src="https://i.stack.imgur.com/GA6bB.png" alt="enter image description here"></p>
  
  <p>Into this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZPSrK.png" alt="enter image description here"></p>