Jump to content
  • 0

Restrict image size?



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


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:


but that doesn't work.

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

<span style="color:red">red</span>    <!-- works -->

<span style="width: 600px;">  <! doesn't work; idea would be to use max-width: 60% -->

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
12 hours ago, HSRobinson said:

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":


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 by garyaitken (see edit history)
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.