How do you easily center an image to a DIV?

<div style="width:200px;height:200px;overflow:hidden;">
    <img src=".." this is a 300x500 image. > 
</div>

How can you make this so that it results in a 200x200 image (DIV covers the rest of the image), but the image is centered?

What's the easiest way to do this? Some JQuery plugin? What would you do?

Edit: I'd like it aligned vertically and horizontally.

Answers


The easier solution: Set the image as the background-image on the <div> instead (position = 50% 50%) :)

This can be achieved via jQuery (not implying this to be a good approach, though—just saying):

var $div = $('div'),
    $img = $('img', $div),
    src = $img.attr('src');

$div.css('background', 'url(' + src + ') no-repeat 50% 50%');
$img.remove();

Need Your Help

How to use Google's User Timing feature in iOS analytics SDK

ios xcode google-analytics analytics

I'm using Google Analytics in my iOS application and I'm trying to use their user timing feature, to record how responsive my backend HTTP server is. Code shown below:

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.