Display rectangle image as a square cropped image css
I have a image that is rectangle in shape, like this.
I want it to displayed like this in one page
Because I need the rectangle image in another page, it's difficult to have a cropped version and a rectangle version both.
Is there a way using CSS background image, or css in an img tag to display the cropped way of the image as a square.
Simply using background image and positioning
<div style="background-image: url('http://i.stack.imgur.com/SXHMg.jpg'); background-position: center; background-repeat: no-repeat; width: 400px; height: 335px; "> </div>