I want to put a banner on the top of the main page in my MediaWiki site. The problem is that when I set up the size of the banner (e.g. [[image:banner.png | 1400px]] ) it will show correctly on my widescreen monitor but when using a device with a different screen size (e.g. a 4/3 monitor, a tablet or a phone) the image extends to the right of the page as it is too large to show on said screen or the screen will display only a part of the image.
What I want to do is make the banner adjust to the width of the screen used, the same way a table's width is adjusted to, say, 100% and to display correctly on all screen sizes.
As Help:Images explains, there are several methods in image markup to customise thumbnail size, including upright which respects user preferences.
As for what you ask, only a surrounding div width can achieve it, so you must set a bigger image than needed and then resize. Not so efficient for bandwidth but works, see Wikivoyage example:
<div class="topbanner">
[[File: Banner Lyon Saint Jean.jpg|frameless|1800px|]]
</div>
with MediaWiki:Common.css having
.topbanner img {
max-width: 100%;
height: auto;
width: auto\9;
}
Related
My logo has a normal size on the screen like this
and if I change the screen-size of the browser then my logo gets very small.
The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:
I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?
Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.
You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:
#media screen and (max-width: 400px){
.logo{
width:200px !important;
}
}
This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.
Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.
I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:
.someAwesomeDivName img {
width:100%;
height:auto;
}
and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.
My wife is using a cover page temporarily for her site - we want a different background image used on mobile than on desktop. I am a complete neophyte however have injected CSS through the Advanced settings tab for the cover page and have inserted the following:
<style>
#media screen and (max-width: 480px) {
body {
background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
}
}
</style>
and it does not work. What am I doing wrong? Any help someone can provide would be greatly appreciate.
I can provide the website URL if required.
You are using a 640x1136px background image for screens narrower than 480px without resizing the background. Also, your image features a large white space at the top. I think the image loads but you are only seeing the top of the image, drawing the false conclusion it doesn't load.
This should display the image on small devices:
#media (max-width: 480px) {
body {
background:
white
url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
no-repeat
center
/contain;
min-height: 100vh;
margin: 0;
}
}
The key is the /contain part of the background shorthand, which could also be written separately as background-size: contain;
Other possible values include:
cover (image gets cropped but covers the element),
Length (in px, em, rem, vw, cm, in etc...),
auto ( original size - also default - what you see now),
initial (reset to initial state)
inherit (apply property of parent)
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
I have a website that will serve mobile phones and tablets which will have different form factors. I have a background image that I want for the home page and would like that image to stretch (possibly distort) to accommodate the available area.
What is the best way to do this?
Is there a good alternative that would reasonably accommodate vastly different form factors (i.e. Tablet/Phones) that would not distort the image?
===============================
Update
I leveraged this code.
.transparent-background {
background: transparent;
}
.background-image {
background: url(app-background.jpg);
background-repeat:none;
background-position:center center;
background-attachment:scroll;
background-size:100% 100%;
}
I added the transparent-background as a class to the Page and Content elements and then added the background-image class to the page element and that seems to do the trick.
Have you tried CSS3 property background-size:cover;
http://www.css3.info/preview/background-size/
If the cover keyword is the used, the background image is scaled,
again preserving the image’s original proportions / aspect ratio, this
time to be as large as possible so that the background positioning
area is completely covered by the background image, ie. both the
images width or height are equal to or exceed the background
positioning area. As such, again depending on whether or not the
proportions of the background image match those of the background
positioning area, some parts of the background image may not be in
view within the background positioning area.
It is not compatible with every browser but should be fine for devices - Compatibility
I would say that you can do this by just changing/modifying CSS.
img {
max-width: 100%;
}
Try reading this article more for better understanding.
http://www.alistapart.com/articles/fluid-images/
To answer your second question, you can use the #media rule to specify different styles for different screen sizes/devices. For example:
#media all and (min-width: 750px) {
/*Any styles in here will only be applied to browsers(screens, etc) with a width > 750px */
}
So you could have different background images/layouts based on screen size by overriding your current styles. i.e. you may have more high definition images set as the backgrounds of divs, icons, etc for larger screens. If that makes any sense.
When placing images in posts on my blog, I want to use the urls of the images.
As I understand, if I make the image at the url bigger than it will display, then this is giving the browser extra work and it's downloading more than it needs to. So I want to make the image the optimum size.
The following code is in my theme css:
#content img {
margin: 0;
max-width: 640px;
}
#content .attachment img {
max-width: 900px;
The blog is at http://wordfruit.com/blog
Should I resize the image to a width of 640px?
If I resize the image, will this be the optimum size whatever browser, screen resolution, etc, that the user has?
Thanks,
The download size will always be the same: Specifying a width will only change the way the image file is displayed in the browser.
Specifying an image size different from the file's original size will give the browser more work resizing it, and there will always be a slight loss in quality (although nowadays not as much as it used to be.)
The ideal thing to do - if possible, which it isn't always - would be to serve the image at exactly the width as you specify in the CSS. That way, no resizing has to take place, but the browser knows to reserve the 640px space until the image is fully downloaded.