Topic on Project:Support desk

Hi everyone,

I am familiar with using the thumb option on pictures, to make them a particular size. I have a rather large picture (more than a 4K screen can show) which I would like to appear at a size that is scaled to the user's screen. I don't know any way to have it scale to their screen... if I simply say [[File:Whatever.JPG]], it is HUGE (they only see a tiny portion). The only other option seems to be a thumb, which makes it be some arbitrarily fixed size I have to specify.

How can I let an image fit the user's screen width? Surely there must be a way.

Thanks if you can help!

There should be a few ways to achieve responsive images.

• You can try Extension:AdaptiveThumb, not sure if it still works.
• Use CSS,

/* Images should be responsive */
res-img {
max-width:100%;
height:auto;
}

• Or define different images for different screen resolutions.

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
    #mp-topbanner-inner {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Wikipedia-logo-v2-o10.svg/375px-Wikipedia-logo-v2-o10.svg.png)
    }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    #mp-topbanner-inner {
        background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Wikipedia-logo-v2-o10.svg/500px-Wikipedia-logo-v2-o10.svg.png)
    }
}

If the extension doesn't work the CSS should be the best option.

Thanks greatly for the reply Ahmad,

The CSS page didn't seem to have any effect? The description above is vague, "images should be responsive". Am I missing some further setting in the my call for the graphics file? Should I be saying a thumb of some percent, or something?

Otherwise, I don't want your third (webkit) solution solution because it uses fixed sizes. That's my question - isn't there anything that's NOT a fixed size? That's automatically the user's screen width?

I guess the AdaptiveThumb is a fallback option, but it would be nice to get the CSS to work, if I can. So,

Am I doing something wrong or leave something out? A straight, enormous image ([[File:Whatever.JPG]]) is still much larger than screen width. If the CSS code affects thumbnails somehow, I don't how to turn it on. If I state a thumb that's much larger the screen width (like 10000px), the CSS did not resize it to 100% of my screen width.

Is there a way to specify thumb nails as a PERCENT of user's screen size, instead of fixed pixels?

Thanks so much if you can help! Can't MediaWiki tell a user's screen size??

• Make a class for responsive images, i.e. insert the following in your MediaWiki:Common.css

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

• The "responsive" in the description is the term used for the automatic size-change functionality that you want for your images.
• Here, res-img is the .CSS class name. Including it in your Wiki's MediaWiki:Common.css page makes it available to all pages on your Wiki. This .CSS rule applies the two height and width style attributes to all the images that come under it.
• Using this class you can use, in your content pages, something of the form:

<div class="res-img">
[[File:Whatever.JPG]]
</div>

• Or if you have a lot of these high-resolution images you can even turn this into a template.
• For some reason, I was unable to make this work through inline div styling i.e. by using <div style="max-width:100%; height:auto;">
• Note that using this method, the image will get stretched if the user's screen size is greater than the "100%" size of the image. It shouldn't be an issue for larger images and smaller screen sizes. For details see, Responsive Web Design - Images.
• You can also automatically apply this .CSS rule to all the images on your Wiki without having to call the class, again and again by inserting the following in your MediaWiki:Common.css

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

It worked! Thank you so much Ahmad!

I also noticed you put a period (.) before res-img in your reply, and also, I had no clue on the rest, but you made it all clear. This example is worth a thousand words.

Thank you for all the other notes, which I'll try to remember. You're a good man.

You can simply use this extension: MultimediaViewer

Fokebox, the description for MultimediaViewer says it "Provides a better experience to users when they click on thumbnails in a page".

I don't want to make thumbnails better. I want to simply display a picture on the screen ([[File:Whatever.JPG]]) at full width.

This is what I'm saying... Right now, the only way I know to present it is either with a thumbnail (too small plus forces user to click through) OR the straight-up graphic ([[File:Whatever.JPG]]) is far too large.

I just want to show a pic at full size width, whatever is full width for the user, without me having to specify anything specific. (A percent width is okay, but not fixed pixels.)

Thanks if you can help.

Hi everyone I am coming to this a bit late but I have the same problem only rendering images on the mobile front end. They scale perfectly well on desktop, but when it comes to the mobile front-end they don't seem to scale. The images in question are in a table format and I wonder if that is causing the problem

Example:

Desktop; https://jollycontrarian.com/index.php?title=Service_catalog&mobileaction=toggle_view_desktop

Vs

Mobile view: https://jollycontrarian.com/index.php?title=Service_catalog&mobileaction=toggle_view_mobile

Any thoughts appreciated! ElectricRay (talk) 22:01, 15 October 2021 (UTC)

If you are using a skin providing the Bootsrap framework (Chameleon, Medik, etc.) one could specify the Boostrap "img-fluid" class e.g.

[[File:NameOfMyFile.jpg|class=img-fluid]]