CODEWITHSUNDEEP
javascriptcss
Harm de Wit
Harm de Wit

Reputation: 2210

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

Upvotes: 2

Views: 1023

Answers (3)

kennebec
kennebec

Reputation: 104760

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;}

Upvotes: 1

Anupam
Anupam

Reputation: 8016

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

Upvotes: 1

Derek Adair
Derek Adair

Reputation: 21915

Try something to this effect.

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

Upvotes: 3

Related Questions