Page 1 of 1
CSS help (figure, figcaption, fluid images)
Posted: Mon Mar 11, 2013 9:46 pm
by obsidian
Here's the test page:
https://dl.dropbox.com/u/20123341/figure.html
Code: Select all
<html>
<head>
<style>
body {
font-family: verdana;
}
figure {
max-width: 900px;
background-color: #888;
margin: 2em auto;
box-shadow: 0 4px 8px 0 #888;
border-radius: 8px;
}
figure img {
display: block;
max-width: 100%;
margin: 0 auto;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
figcaption {
max-width: 100%;
padding: 8px 16px;
font-size: x-small;
color: #eee;
background-color: #444;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
</style>
</head>
<body>
<figure>
<img src="https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-wordmark/firefox_logo-wordmark-horiz_RGB.png">
<figcaption>Test 1: Firefox logo and wordmark. High resolution 32-bit lossless PNG file.</figcaption>
</figure>
<figure>
<img src="http://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/wordmark-logo.png">
<figcaption>Test 2: Firefox logo and wordmark. Small image, 32-bit lossless PNG file.</figcaption>
</figure>
</body>
</html>
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).
Ideas?
Re: CSS help (figure, figcaption, fluid images)
Posted: Mon Mar 11, 2013 10:30 pm
by 4days
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Mon Mar 11, 2013 10:53 pm
by obsidian
Yes, but then the image width is no longer fluid (unless I'm missing something).
Re: CSS help (figure, figcaption, fluid images)
Posted: Mon Mar 11, 2013 11:18 pm
by Dark Metal
obsidian wrote:Yes, but then the image width is no longer fluid (unless I'm missing something).
You started the thread because you're missing something.
Re: CSS help (figure, figcaption, fluid images)
Posted: Mon Mar 11, 2013 11:33 pm
by GONNAFISTYA
Goddamned nerds.
Where's my bat?
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 1:15 am
by Tsakali
obsidian wrote:Yes, but then the image width is no longer fluid (unless I'm missing something).
the second image still looks fluid to me with 'inline-table' / 'table'
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 6:20 am
by Eraser
Stackoverflow3world.com
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 7:07 am
by shaft
T&T
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 9:08 am
by MKJ
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 11:29 am
by SoM
shaft wrote:T&T
that's dead
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 5:33 pm
by Deathshroud
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 5:50 pm
by MKJ
the problem he's having is not related to the img tho, but to the figure container. my solution only works one way but not the other.
the solution on that site kinda cheats, as he sets the body width to 850px. suppose you could give that a maxwidth so that it scales down..
Re: CSS help (figure, figcaption, fluid images)
Posted: Tue Mar 12, 2013 7:12 pm
by bitWISE
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Wed Mar 13, 2013 8:29 am
by MKJ
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Wed Mar 13, 2013 8:42 am
by MKJ
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.
Code: Select all
<!doctype html>
<html>
<head>
<style>
body {
font-family: verdana;
}
div.figContainer {
max-width: 900px;
text-align: center;
margin: 0 auto;
}
figure {
max-width: 100%;
background-color: #888;
margin: 2em auto;
box-shadow: 0 4px 8px 0 #888;
border-radius: 8px;
display: inline-block;
}
figure img {
display: block;
max-width: 100%;
margin: 0 auto;
border-radius: 8px 8px 0 0;
}
figcaption {
max-width: 100%;
padding: 8px 16px;
font-size: x-small;
color: #eee;
background-color: #444;
border-radius: 0 0 8px 8px;
}
</style>
</head>
<body>
<div class="figContainer">
<figure>
<img src="https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-wordmark/firefox_logo-wordmark-horiz_RGB.png">
<figcaption>Test 1: Firefox logo and wordmark. High resolution 32-bit lossless PNG file.</figcaption>
</figure>
</div>
<div class="figContainer">
<figure>
<img src="http://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/wordmark-logo.png">
<figcaption>Test 2: Firefox logo and wordmark. Small image, 32-bit lossless PNG file.</figcaption>
</figure>
</div>
</body>
</html>
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 5:14 am
by FragaGeddon
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.
Code: Select all
<!doctype html>
<html>
<head>
<style>
body {
font-family: verdana;
}
div.figContainer {
max-width: 900px;
text-align: center;
margin: 0 auto;
}
figure {
max-width: 100%;
background-color: #888;
margin: 2em auto;
box-shadow: 0 4px 8px 0 #888;
border-radius: 8px;
display: inline-block;
}
figure img {
display: block;
max-width: 100%;
margin: 0 auto;
border-radius: 8px 8px 0 0;
}
figcaption {
max-width: 100%;
padding: 8px 16px;
font-size: x-small;
color: #eee;
background-color: #444;
border-radius: 0 0 8px 8px;
}
</style>
</head>
<body>
<div class="figContainer">
<figure>
<img src="https://assets.mozillalabs.com/Brands-Logos/Firefox/logo-wordmark/firefox_logo-wordmark-horiz_RGB.png">
<figcaption>Test 1: Firefox logo and wordmark. High resolution 32-bit lossless PNG file.</figcaption>
</figure>
</div>
<div class="figContainer">
<figure>
<img src="http://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/wordmark-logo.png">
<figcaption>Test 2: Firefox logo and wordmark. Small image, 32-bit lossless PNG file.</figcaption>
</figure>
</div>
</body>
</html>
I put it up on codepen.
http://codepen.io/FragaGeddon/pen/BvtcK
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 2:38 pm
by obsidian
Cool link.
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 2:56 pm
by MKJ
theres a bit of a hack to make the figcap wrap around, but then the lot won't shrink anymore when resizing.
so yea. figcaption.style.width = img.width.
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 5:28 pm
by bitWISE
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 6:42 pm
by obsidian
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.
Re: CSS help (figure, figcaption, fluid images)
Posted: Thu Mar 14, 2013 8:10 pm
by MKJ
It's a weird and mostly unexpected behavior of the figcaption element.
Good thing the specifications aren't final yet ey.
Re: CSS help (figure, figcaption, fluid images)
Posted: Sat Mar 16, 2013 12:55 pm
by diego
lol MKJ is nerding out yet again
Re: CSS help (figure, figcaption, fluid images)
Posted: Sat Mar 16, 2013 12:59 pm
by MKJ
set diego.upset = true;
Re: CSS help (figure, figcaption, fluid images)
Posted: Sat Mar 16, 2013 2:57 pm
by GONNAFISTYA
lol