diff --git a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid index 0f4bd9012..105a71311 100644 --- a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid @@ -25,6 +25,38 @@ Any content of the `<$image>` widget is ignored. The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image. +! Responsive images and `` + +[[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area]] coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a `svg` and `foreignObject`: + + + +[img[Tiddler Fishes.svg]] + + + +Orange fish + + + +Cyan fish + + + +Purple fish + + + +Green fish + + + +Blue fish + + + + + ! Image Status Classes <> The following CSS classes are automatically added to the `` element to indicate the status of the image. Note that only one of these classes will be added at the same time.