2012-12-17 9:54, Jan Erik Moström wrote:
One thing I've always wanted to do is to get the image width so I can use
> it in my declaration but I've never found a CSS-only solution.
It isn't quite clear what you mean here. There's no way to "get"
anything in CSS in the sense of making some quantity the value of a
variable, since there are no variables in CSS (so far).
For example, assume some HTML code along these lines
<figure>
<img src="2012-12-15_13-01-21_14364.jpg" width="1024" height="681" alt="">
<figcaption>Bla bla bla bla bla</figcaption>
</figure>
Now I would like a parts of my figcaption and figure styled based on the photo
width
(not same for all figures/figcaptions)
At the simplest, you might want to set the width of the figcaption the
same as the width of the image, without hard-wiring a specific width
into CSS. This is challenging enough. There are different ways to do
that when you can choose the HTML markup, see
http://www.cs.tut.fi/~jkorpela/www/captions.html
but to translate these ideas into pure CSS for the given HTML isn't that
easy. But the following works, with the usual CSS caveats:
figure { display: table; margin: 0; }
img { display: table-row; }
figcaption { display: table-caption; caption-side: bottom; }
I've set margin to 0 just to remind of browser defaults (typically
nonzero margins) for <figure>.
If you would like to restrict the width of the caption e.g. to half of
the width of the image, you could just add
figcaption { width: 50%; margin: 0 auto; }
Yucca
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
