[TW5] Image widget: understanding the width/height attribute

[Michael]

I am trying to understand how image sizing works when using the image widget:

The width and height attributes in the TW image widget is are given as bare numbers, without any absolute or relative length dimensions like pt or %. Adding pt, %, etc. has no effect.

<$image source="..." width=300 />

In CSS the width/height attribute requires an absolute or relative length dimension.

Does that mean that even if I assign a class within the image widget, I cannot affect image size and width via custom CSS, but only directly in the widget?

Cheers,
Michael

[Jeremy Ruston]

Hi Michael

The width and height attributes in the TW image widget is are given as bare numbers, without any absolute or relative length dimensions like pt or %. Adding pt, %, etc. has no effect.

That's correct. The suffix "px" is added to the provided value before use. HTML5 only allows pixel values for img width and height:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height

In practice, browsers still support the HTML4 option of percentage values (which are taken as a percentage of the containing element). I've made a change for 5.0.13 so that percentage values can also be specified:

https://github.com/Jermolene/TiddlyWiki5/commit/12e26009eef5e29140ba1a880ff033428d673630

 

<$image source="..." width=300 />

In CSS the width/height attribute requires an absolute or relative length dimension.

Does that mean that even if I assign a class within the image widget, I cannot affect image size and width via custom CSS, but only directly in the widget?

You can give the image a class and resize it in a stylesheet without any limitations. If no width and height are provided to the image widget the generated img tag will take its size from the browser CSS rules in the usual way.

Best wishes

Jeremy

 

Cheers,
Michael

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:jeremy...@gmail.com