Inline block parent not resized to child width when browser height changes

Question

Trying to wrap an image in a container and have the container always be the dimensions of the child image but the width and height of the container are only resized to the image when the browser is resized horizontally and not when the browser is resized vertically.

I have a demo of the problem here: http://codepen.io/anon/pen/ksDFm

Using display inline-block to wrap the div around the image.

If you load the page and then resize the browsers height but not width the containers width does not change. If you resize the browsers width it works like I would expect. Any way to fix this?

Why would the width change when you make the browser window shorter? — Paulie_D, Feb 27 '14 at 11:26
@Paulie_D Because the width of the child image that it is wrapping changes. Same reason why the height changes if you make the browser skinnier. — erickreutz, Feb 27 '14 at 11:28
Element widths do not change when the browser is re-sized vertically. — Paulie_D, Feb 27 '14 at 11:36
@Paulie_D I think you suggested `vh`/`vw` units weeks ago; It may be helpful to share the link of that answer here. — Hashem Qolami, Feb 27 '14 at 11:40
Just remove the `max-height:100%`, then it will resize when the width changes but not when the height changes — Pete, Feb 27 '14 at 11:42
This might be useful: http://stackoverflow.com/questions/21799852/css-width-same-as-height/21800563#21800563 — Paulie_D, Feb 27 '14 at 11:43

score -1 · Answer 1 · answered Jul 17 '14 at 05:56

-1

please try it

.image-wrap img {
  max-height: 100%;
  width: 100%;
  max-width: 100%; 
  height: auto;
  vertical-align: middle;
}

answered Jul 17 '14 at 05:56

Mukesh

16

This is a very low quality answer. Although your code may solve the problem, please provide an explanation as to why this will fix the question authors problem so everyone can learn from it. – Chris Spittles Jul 17 '14 at 06:16

Inline block parent not resized to child width when browser height changes

1 Answers1