Force div to have mutual height and width with inner img

After messing with a lot of different options, I've decided to create a simple 16_9.jpg (16x9) and then put it inside the div with to force the div to have my ideal proportions, but it se开发者_StackOverflowems that the div doesn't care about its inner elements scaled in %. I may affect the div size with img height="100px" for example, but it stops working when using percents. And it seems that it's my last resort, as I have to make a fixed-height layout, what results in an unknown exact width - I have to rely on the proportions only.

Using a percentage height on an element inside of a div that does not have a fixed height fails because the percentage height is based off of the height of its container. For example if your div is 200px tall then the height of an element inside of it that is set to 100% will be 200px. But if the div does not have a height set the browser does not have a height to base the percentage height of the interior element off of. Divs and other block level elements have a dynamic height and width by default, the height is determined by the height of elements that are contained within the div, and the width is determined by the width of the element that contains the div.

One way you can set the width of a div to be based off of its contents is if you float the div, in that case the div will no longer base its width off of its container and instead base it off of its children. However that may not be the best solution for you; its hard to say without more information about what you are really trying to accomplish.