Center an element that is larger than 100%

I'm having trouble centering an image that's larger than it's parent element. I've set the min-width and min-height to 100% so开发者_如何转开发 that the picture will always fill up the parent element.

The visual problem appears when a image doesn't have the proportions of the parent element. The image is getting cropped too much on the right or bottom side.

I guess i could bypass this problem when i just center the images, so the most important part of the picture doesn't get cropped. Is there a way to center the image that's larger than it's parent element? (Without changing the parent element ofc)

I would rather see a css oriented answer instead of javascript because of performance issues when traversing a lot of images in the DOM.

Here's a part of a screenshot of two images contained in a parent http://d.pr/kEcb. The images sizes are ok, but i cannot get them centered

Try something to this effect.

img/div/whatever {
   left: 50%;
   margin-left: **Half of image width**
}

Use overflow property for the parent div if you want to view the image coming out of the div use visible else use scroll

The simplest css solution would be to set the image as the background-image of the parent,

with {background-repeat:no-repeat;background-position: center center;}