Restrict image size?

[garyaitken]

It is possible to restrict the maximum size of an image as follows:

[[Image:screenshot1.jpg|600px]]

We have a TOC appearing on the right and we want even large images to appear to its left, rather than below.  I was hoping one could write:

[[Image:screenshot1.jpg|60%]]

but that doesn't work.

I next tried to enclose the whole thing in a span:

{{Manual:TOC}}
<span style="color:red">red</span>    <!-- works -->

<span style="width: 600px;">  <! doesn't work; idea would be to use max-width: 60% -->
[[Image:screenshot1.jpg]]
</span>

[HSRobinson]

See https://www.mediawiki.org/wiki/Help:Images#Size_and_frame

[garyaitken]

12 hours ago, HSRobinson said:

See https://www.mediawiki.org/wiki/Help:Images#Size_and_frame

I think I've already looked at those examples, but I may have missed something.  Those examples show the use of absolute pixel widths, as in [[Image:screenshot1.jpg|600px]].  I need to be able to use a percent, something like [[Image:screenshot1.jpg|60%]], or something similar.  The fixed pixel size means a large image won't expand past the fixed pixel size for larger screens; I want it to be able to expand up to some % of the available space.

In this particular case, it might be sufficient if I could use the CSS "vw" (viewport width) expression, but that doesn't work either.

What I want is for this to work with a % or better, a means of saying "clamp the image width to a max of the space left after the TOC":

{{Manual:TOC}}
[[Image:Freecad-interface-01.jpg]|60%]

If I use "600px" in place of "60%", it works, downsizing the image to fit in the available space. But as explained in the original post, that clamps the image size on larger screens. 

Edited January 9, 2019 by garyaitken (see edit history)

[Skizzerz]

Unfortunately, what you seek is likely not possible by using [[Image:]] tags to embed images in pages. If you don't specify a width in the tag itself, MediaWiki defaults to 300px. You can change this default, but it will always be in px instead of percentages.

An extension would be needed to change this for [[Image:]] tags, or you could directly embed the images by putting the full url of the image bare into the page (no link syntax around it) ($wgAllowExternalImages, $wgAllowExternalImagesFrom, or $wgEnableImageWhitelist) and then wrap that in a span/div which sets the width.