Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Image and Caption with max-width



4:18 pm on Sep 24, 2007 (gmt 0)

5+ Year Member


I searched many times for this problem, but I couldn't found it. First, I'd like to put an image floating on the right with max-width=200px (resize if larger). No problem!


<div style="figRight">
<img src="..."/>


max-width: 200px;
width:expression(this.width > 200? "200px" : this.width);

Then, I put a caption for it:

<div style="figRight">
<img src="..."/>
<p>caption goes here</p>

And problem raises: if image width < 200px, but caption width > 200px, the div width is set to 200px so the image is not on the right now. I want that, if image width = 150, so div width = p width = 150.

Anyone has a suggestion please?

- jcisio -


8:18 pm on Sep 24, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Welcome to WebmasterWorld jcisio!

I've come up against this problem many times and I simply don't think there's a way around it with CSS. Rules that trigger shrinkwrapping (position:absolute, floating, tables etc) will always shrinkwrap to the width of their biggest child and if that's the caption instead of the picture then that's what you get. We finally settled on hardcoding a width in a style attribute - our backend system knows the widths of any images it writes out and can easily apply a style="width:x" to the container.

The other alternative that we're doing more and more these days now that we're using grids properly is just to say that all images will have to be reprocessed to be the right width. It makes for a more consistent design at the end of the day.

In the future, you'll see that browser image scaling is getting better and better. You quite plausibly could just say img{width:100%;height:auto;} to force the image to resize up to the width of the container without too much loss in quality.

[edited by: Robin_reala at 8:18 pm (utc) on Sep. 24, 2007]


7:42 am on Sep 25, 2007 (gmt 0)

5+ Year Member

Thanks for the hint. It's just when the image is too small it's zoomed in too ugly.

I think fix the size in server side is heavy even Joomla mosimage uses that, except that you have a good caching system.

I thought for something like width = previous sibbling width but as you say, it's hardly possible in css. Maybe I'll look for a javascript solution.


Featured Threads

Hot Threads This Week

Hot Threads This Month