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.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.