What does width mean for <img>?

lizat · Post by **lizat** » Wed Feb 25, 2009 11:54 am

Dear Madcaps,

For the <img> tag if I set the Box.width or the Positioning.width (they seem to be linked?) to 100% does this mean the image will appear at its full size or that it will fill the screen 100% (for online medium) i.e. shrink or stretch to fit.

And which ever is the answer how do I do the other?

Thank you....................... liz

jmenning · Post by **jmenning** » Wed Feb 25, 2009 1:11 pm

I think using a percent for image dimensions (width, height) should set the image size based on the container size. So, width: 100% should set the image width to take up the whole width of the container it's in (stretching the image side-to-side if necessary).

To set the image width to 100% of the image size, you can either not specify a size (in which case the browser should just display the image at regular size) or set width: auto.

lizat · Post by **lizat** » Wed Feb 25, 2009 1:39 pm

Thank you..................... liz

lizat · Post by **lizat** » Thu Mar 05, 2009 10:32 am

I've done some further testing now and can't understand what is going on.

If I make the width 100%, the image shows OK in the editor but in preview or generated htm page it is about 1.5mm wide, even if I make it 10,000% it is still only 2cms. What else might govern this?

I also tried the other settings, what would be perfect is a picture that scales with provided browser window, and I thought that was what would happen at 100%, although perhaps that isn't possible? So I thought perhaps "auto" would do it, but I think this is just whatever size the image is use that.

Any ideas?

Thank you..................... liz

jmenning · Post by **jmenning** » Thu Mar 05, 2009 10:55 am

Can you post some details so we can see what you're working with? The code from that section of your topic, and the relevant items in the style sheet would help.

Without that, I can only make a guess.

If the image is inside a tag, and the has no width (or is set to auto), then you may wind up with a situation where the is trying to size itself based on the size of the contents (the image) and the image is sizing itself based on the , and it comes out really small. I'm not completely sure how the browsers interpret this situation.

You could try creating a custom class for that to set it to 100%, so it's the width of whatever its container is - a <div> or the <body> or whatever.

Like I said, just a guess. Without seeing what you have set up, that's all I've got

lizat · Post by **lizat** » Thu Mar 05, 2009 11:07 am

I'd gladly do that but not sure how to, tell me wht to do???

liz

Post by **doc_guy** » Thu Mar 05, 2009 1:00 pm

Are you using Capture? If you have changed the DPI larger than 92 dpi in Capture, then the image will appear much smaller when you generate the output.

lizat · Post by **lizat** » Thu Mar 05, 2009 2:09 pm

Dear Paul,

I am using Capture, but it is set to 96dpi. What else could I check?

liz

MadCap Software Forums

What does width mean for <img>?

What does width mean for <img>?

Re: What does width mean for <img>?

Re: What does 100% width mean for <img>?

Re: What does 100% width mean for <img>?

Re: What does width mean for <img>?

Re: What does width mean for <img>?

Re: What does width mean for <img>?

Re: What does width mean for <img>?