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.
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();