Center and resize a container div dynamically based on image inside

Question

I need to have a container div with an image inside.

The container div must be centered horizontally AND it must only take up as much space as its content, the image, has.

The image inside must resize with the window size.

I've tried to achieve this with display: inline-block; - It works when resizing the window horizontally, but not when resizing vertically.

Check out this fiddle http://jsfiddle.net/J86L9 - resize the window horizontally and vertically to see the "bug".

EDIT: Safari does it right, while Chrome does not resize the container but the image and Firefox does nothing at all. I think it could have to do with the max-height property?

#wrap {
    text-align: center;
}

#container {
    display: inline-block;
    border: 1px solid red;
    max-width: 75%;
    max-height: 75%;
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

When you add a height property to the `html,body` tag, it's better : http://jsfiddle.net/webtiki/J86L9/1/ — web-tiki, Jun 04 '14 at 12:08
does not help in chrome at least, container does still not adapt to the image size after resizing the window — riccardolardi, Jun 04 '14 at 12:09
that worked already before. its the container (marked with red border) that does not resize properly. — riccardolardi, Jun 04 '14 at 12:12
@alberto2000 what do you mean it's not resizing properly..? in web-tiki's fiddle it's resizing properly. Define *resizing* — T J, Jun 04 '14 at 12:17
@TJ in chrome or firefox: when you resize the window vertically, the container does not adapt to the new image size — riccardolardi, Jun 04 '14 at 12:24
is it okay that the image changes it's aspect ratio when the windows size is changed in one direction..? otherwise you'll have to write script to keep the ratio. — T J, Jun 04 '14 at 12:32
@TJ no the ratio must be preserved. i wanted to see if it was possibile without js — riccardolardi, Jun 04 '14 at 12:35
Not possible in my knowledge. you'll have to calculate the corresponding width — T J, Jun 04 '14 at 12:40
I have already encountered this issue, and didn't find a non-js solution but you might according to your use case. Why do you need the container to resize according to image width? — web-tiki, Jun 04 '14 at 12:42
@web-tiki because i need to place other elements absolutely inside that container - it would be easy if it was possible to place elements inside a img element! — riccardolardi, Jun 04 '14 at 12:56
@alberto2000 ok. Do the images always have the same aspect ratio? — web-tiki, Jun 04 '14 at 13:18
Then you should take a look at this http://stackoverflow.com/a/23631436/1811992 it can help you maintain the aspect ratio of the image for the div. — web-tiki, Jun 04 '14 at 13:38

Jen · Answer 1 · 2014-06-04T15:06:41.097

0

Display the container as table is the easiest way.

**Will this work? http://jsfiddle.net/J86L9/39/

body, html {margin:0; padding:0; width:100%; height:100%;}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  outline: 0;
}
#wrap {
    display: table; width:100%; height:100%; border:1px solid red;
}
#container {
    display: table-cell; margin:0 auto; background:#ccc; text-align:center; vertical-align:middle;
}

img {
    width: 50%; max-height:90%; display:inline-block;
}

edited Jun 04 '14 at 15:06

answered Jun 04 '14 at 13:57

Jen

1,663
1
17
34

this wont adapt the height, which should be not bigger than the window... anyway I solved it with JS... dont think its possible without. – riccardolardi Jun 04 '14 at 14:18
You're right, the answer was incomplete. I added a more complete Fiddle, for any future hits on this question. – Jen Jun 04 '14 at 15:07

score 0 · Answer 2 · answered Jun 04 '14 at 15:19

Does this work for you?

http://jsfiddle.net/J86L9/42/

The "secret" is using a background image on a div rather than an img tag. This may work better for you as you mentioned in comments that you wanted other elements along with the image inside the container.

I know the border doesn't track exactly to the image but if you want that behaviour you should just set the border on your image rather than a container div.

CSS:

html, body {
 height: 100%;
 width: 100%;    
}

.wrapper {
    width: 50%;
    height: 100%;
    position: relative;
}
.wrapper:after {
    padding-top: 150%; /*this specifies the aspect ratio*/
    display: block;
    content: '';
}

.main {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
    background: url(http://placekitten.com/g/400/600) no-repeat center center;
    background-size: contain;
    border: 1px solid red;
}

Center and resize a container div dynamically based on image inside

2 Answers2