MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D
Related
I'm playing around with the VMware Clarity Design System UI (https://vmware.github.io/clarity/) and am running their seed application. I'm trying to replace their brand icon with my own, but it's a different size. I'm noticing that the icon appears to be hard-coded to 36px x 36px. If I try setting a new size in CSS, it still renders as 36px x 36px. Is this hard-coded?
LogoSize
That was it. I was thinking I needed to add the size to the image, not to the .clr-icon class. This works:
.header .branding .clr-icon {
height: 13px;
width: 73.9px;
&.clr-dell-logo {
background-image: url(../images/DellLogoWht.png);
}
}
Your answer is correct for when you want to set size with css (I up-voted yours to reflect that). You can also set an icon size with the size attribute on the clr-icon element:
<clr-icon shape="info" size="48"></clr-icon>
We do have an example using the size attribute here, Clarity Icons Documentation
It's about 1/2 way down the page or search for Setting the icon size. FYI - we are in the process of updating the docs for Clarity Icons.
I'm looking for a way to place text under my images and want to keep it there when changing browser size (if possible make text bigger and smaller when doing so, but not necessary). When I use a div around an image the other images seem to disappear.
This is the link to the site:
http://www.noortjepalmers.be/portraits.html
Thanx.
You can add a div around each image, give it a class like "image-container" and then in your css you set
.image-container {
display: inline-block;
}
I have an MVC 4 View where I am displaying a table of data. This table is rendered inside a <div> tag. What I would like to do is to display a background image that the div contents sit on top of. The image should comprise most, or all, of the div and be somewhat faint and subtle. In other words, it shouldn't stand out. It should almost look like a watermark. I don't have a lot of experience with MVC and HTML/CSS and am not sure how to do this.
I'm not sure what sort of image I should use (PNG, JPG?), or if it even matters and how to make it transparent enough to make it look subtle etc. I'm assuming CSS can handle much of this for me, just not sure where to start.
Oh it's easy. Give the div a class, eg:
<div class="table-wrapper">
At the end of the css file being used on your page, if their is one, write css like this:
.table-wrapper{
background-image: url(/path/to/image);
/* if the image repeats nicely, tile it, using background-repeat */
background-repeat: repeat; /* repeat-x, repeat-y and no-repeat are options */
/* alternatively, you could stretch it to fit the div, using background-size */
background-size: 100% 100%;
}
You shouldn't see much difference in size between a png or a jpg, as long as you don't use transparency. .pngs with transparency can get make a file big very quickly.
I suggest picking an image that matches the colour of the surrounding area quite closely. This way you can give the impression of a low-contrast or translucent image, without the file-size cost.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
I want to scroll a large picture in a small block. But when I put the large image in a small block, the layout is broken; the image just extends out of the block. I found a nice library which could resolve this. Check this out:
http://www.viget.com/inspire/jquery-image-scroller-plugin/
http://www.viget.com/uploads/file/image-scroller/
Did use the style overflow: hidden; on the container? Also, I already used image-scroller from viget, works well :)