homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Image and Caption with max-width
jcisio

5+ Year Member



 
Msg#: 3459324 posted 4:18 pm on Sep 24, 2007 (gmt 0)

Hello,

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!

HTML

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

CSS

div.figRight
{
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>
</div>

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 -

 

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3459324 posted 8:18 pm on Sep 24, 2007 (gmt 0)

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]

jcisio

5+ Year Member



 
Msg#: 3459324 posted 7:42 am on Sep 25, 2007 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved