Topic on Project:Support desk

I want to style responsive images. (I am running mediawiki 1.34.1 and I have the TemplateStyles extension installed.) Some Googling lead me to create a Template:ResponsiveImage like:

<div class="responsive-image">
 {{{1}}}
</div>

with a style sheet Template:ResponsiveImage/style.css like:

/* To make images responsive */
.responsive-image img {
    max-width:100%;
    height:auto;
}

So far so good. I can do {{ResponsiveImage|[[File:some image.png]]}} and it fits across the full screen width and shrinks with the screen size.

But it would be neat to be able to pass max-width to give other responsive width images, but I can't find any documentation or examples of how to do it. I've tried the obvious - max-width:{{{1}}}; - but just get an error

Invalid or unsupported value for property 
max-width
at line 3 character 12.

Is there some way to do this? (Or any other way to make responsive images or arbitrary percentage of the screen width.)

TemplateStyles extension does not support parameters.

You could put the image inside a div tag with an inline style attribute containing a max-width, since the parent element should constrain the child element afaik

Thanks, but styling it in an inline div doesn't work, as described elsewhere in this Project Support Desk by AhmadF.Cheema whose comments lead me to the approach I tried, which I've documented here (link broken up to avoid 'abusefilter-warning-linkspam' warning) https://scienceforsustainability.org/wiki/Scratch:TestImageWidth

I was thinking combining both might work:

<div class="responsive-image" style="width:50%">[[image:...]]</div>

Keeping your templatestyles the way they are currently where it sets a width on the img tag.

Although i havent tested so i could be wrong.

It looks as if Extension:AdaptiveThumb which Cheema mentioned still exists so I'll try that next.

I tried it. The documentation (at Extension:AdaptiveThumb and the author's own website, staerk DOT de SLASH thorsten SLASH AdaptiveThumb) is scanty and contradictory, but it seems to only work with external images, and when I tried it, it threw a load of php errors over my page complaining that I hadn't set a bunch of parameters it says nothing about, like align, border, link, title, alt, and margin.

So that's not my answer :-(