shrink to fit and centralizing problem

[drayarms]

Hello everybody, like the subject line suggests, I’m trying to force a div that contains an image to shrink to the image’s dimensions, in order to centralize the image inside the containing div. For the sake of simplicity, I’m going to henceforth refer to the container div as outer div and the image as inner div.

Normally I would use this line within the inner div style to force inner div to centralized within outer div:

#inner_div{width: some fixed number; margin-left: auto ; margin-right: auto ;}

But in this case, the inner div has no fixed width. I set a fixed height and a max-width so that the picture can wouldn’t be stretched and distorted. Then in the outer div, I set overflow to hidden to hide any extra height from being displayed. Pictures where the width exceeds the height look like this which is exactly what i want:

But when the height exceeds the width, then arises the need for the image to be centralized and apparently the max-width attribute prevents the image to be centralized.

So I figured out that the solution would be to shrink the outer div to assume the width of inner div, then centralize outter div within its own container div. I’m not sure how shrinking to fit can be accomplished. Any ideas? Or any other smart ideas to fix the original problem?

[smokeys_13]

Hi there,

A couple of notes:

1. Have you tried giving the outer div a fixed width to accomodate all possible images, then apply the style “margin:0 auto;text-align:center;”

2. Instead of shrinking the outer div, you should be able to stretch it. Give it a min-width (or none to be honest) and it should spread to accomodate the width of the internal element (unless it is absolute or floated)

3. If you have uploaded this to the world wide web, post the link and I can see for myself and try a few things myself without passing each idea through you