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.

Thanks

Answers


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>

http://jsfiddle.net/ycs1s9f9/


Need Your Help

Speed up garbage collection in lapply

r garbage-collection lapply

What's the fastest way to do garbage collection in a lapply function or loop? What seems obvious to me slows things down enormously. Am I doing it wrong? Is there a quicker way?

Python Mocking a method from an imported module

python unit-testing python-unittest python-mock

I want to understand how to @patch a function from an imported module.