Test 1 works as expected because the image width is greater than 900px. Test 2 does not. I would like the container (figure) and sibling (figcaption) to shrink to fit the image, while keeping the image fluid so that it can scale down on smaller screens (scale the browser width down).
think you'd need to use display:table or display:inline-table if you didn't want to use javascript - otherwise the container will need a width specifying.
figure is a block element by default and will therefore take up the entire space available. while you changed the available space to 900 instead of fullscreeen with max-width, it will still stretch out to 900 regardless of content.
change it's display to inline-block and see the magic.
MKJ wrote:figure is a block element by default and will therefore take up the entire space available. while you changed the available space to 900 instead of fullscreeen with max-width, it will still stretch out to 900 regardless of content.
change it's display to inline-block and see the magic.
well, looks like you're SOL. even with a fluid container it won't scale the figure down when its content is smaller than itself.
pretty strange that a figure is a block element actually. you'd think you'd want it to contain the img/svg/canvas and nothing else.
it's about 3 lines of javascript to fix, but unfortunately not the most semantic or clean solution.
I take that back.
my initial solution was correct, it's just that the absolute maxwidth fucks it up.
give the figure a display inline-block and it's maxwidth to something relative, like 100%, and you're set.
if you want to influence the actual width of the figure you must wrap it in a container, in this case one with a max-width of 900px.
MKJ wrote:I take that back.
my initial solution was correct, it's just that the absolute maxwidth fucks it up.
give the figure a display inline-block and it's maxwidth to something relative, like 100%, and you're set.
if you want to influence the actual width of the figure you must wrap it in a container, in this case one with a max-width of 900px.
It doesn't look like it's possible. In MKJ's example, figcaption no longer wraps if it is longer than the image width. Since img and figcaption are siblings, there doesn't seem to be a way to make one affect the other.
That sucks, I guess I'll have to hack something together with a bit of Javascript, but had hoped to avoid it.
Images are no longer fluid (resize your browser window to be narrow).
Looks like it's one or the other: fluid image or wrapping text in figcaption. Since images can't have children there's no way to use the image as a container to set the same width for figcaption. Silly HTML.
