When using the picture tag with srcset, I can define different image sources for different viewport widths.
What I want however, is to define different images sources for the actual space (width-based) the image occupies after the browser has rendered the page.
For example:
Viewport width is 1920px Website uses container size of 1200px
Container is split into two columns of 600px each
Column 2 contains an image with 100% width - which will result in a width of 600px
The srcset for the image supplies 400x300px, 800x600px and 1200x900px
The browser should now automatically know to pick 800x600px
As long as it's clear that the image will always be in that spot, I could use srcset based on the viewport width.
Unfortunately, my site design is so, that content editors can freely add columns/rows and even nest them. Also at some point columns collapse and become always full-width. So when rendering the HTML, I cannot predict how much of the viewport width an image will get.
Therfor I would love to have the browser check how much pixels the image actually has when it's rendered to the user - and choose the appropiate image.
I have searched quite a bit, but couldn't find anything about that.
Is that even possible?
Or is the only solution a Javascript one?
No, sadly this is not possible yet. There has been much talk about element queries, basically media queries that apply to the element's size, instead of the windows size. But they are apparently really complicated to integrate. There is also no syntax for it yet. The classic problem that is often brought up (in pseudo-syntax), is something like this:
.child {
width: 500px;
}
.container:min-width(450px) > .child {
width: 400px;
}
so we set .child to 500px width, BUT then we say if the child's parent is more than 450px, the .child should have a width of 400px, thus .container would be less than 450px again, and .child is set again to 500px and so on and on. This causes what is called a "circularity problem".
There are also other problems, such as with dynamic layouts and the browser not really knowing how much space an element will take up beforehand. This could lead to huge performance issues, as the browser would simply have to calculate too much.
There are however JS libraries that try to implement this (e.g. EQCSS, CSS-Element-Queries or EQJS), but for your case a selfmade JS would probably be better. I'd recommend checking out how those libraries handle it though.
More info:
https://www.xanthir.com/b4PR0
https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690
JS Libraries:
https://elementqueries.com/
http://marcj.github.io/css-element-queries/
https://github.com/snugug/eq.js
Related
I was wondering if there is any javascript code that zooms a webpage out to max (till no horizontal scrolling is possible) so that it looks good on mobile.
I've used:
document.body.style.zoom="x%"
But it will only allow me to zoom in. Zooming out, or putting a percentage higher than 100%, does not have any effect.
It sounds like you need to use the browser object model to get height and width then use JavaScript to set the view container to the dimensions returned, another option is to set the body container to height: 100% width: 100% but depending how the page is designed it has to be tested. Using zoom which is not guaranteed to be implemented sounds like a bad option. A better option would be conditional JavaScript to render the view container according to BOM
For a site, I need to be able to dynamically display background images depending on the user's screen resolution.
I.e when the page starts loading, within the <head> a small javascript loads, which sets the page's background via css to something like http://example.com/backgrounds/beach_800x600 where 800 and 600 is the screen resolution determined via the javascript.
I'm creating various resized images for the most common screen resolutions, so that for most people there will be an exact match of their screen resolution with an existing image. If there's not an exact match made, e.g if a user has a screen resolution AxB for which there's no existing image, then an image will be created & resized to AxB on the fly, and will be served. From then on, anyone with the resolution AxB would be served that image.
The questions I have are:
1) Is this a safe method? I.e I don't want more than 50 custom sized images created for custom screen resolutions. Would I be able to stay in that ball park with this method? And are there any other security risks I should be aware of with this method?
2) Should I give it an error margin of say 50 or 100 pixels, so if someone's resolution is 700x900, and I don't have that but I have 600x800 or I have 800x1000, then I would serve those existing images rather than create new ones? If so, should I set the margin at 100 pixels or is there a better number?
Through the use of CSS3 Media Queries and the background-size property, there's virtually no need for JS other than for compatibility purposes with out-dated browsers.
Here's a link with details about background-size. This property allows you to scale the image in various ways, regardless of the users resolution. Sometimes this might not be ideal.
And so we have CSS3 Media Queries. With these, you can target certain resolutions (or greater than and less than certain resolutions) and tell the browser which image you would like to show accordingly (or even how to display it, with or without background-size as well).
You would probably not want to create an image for each screen resolution, and you would probably want to base it off the browser window size - not screen resolution. Given that a window could be virtually any size, you might want to re-think this.
Also this can be done easily using CSS3 media selectors, not JavaScript (though it could also be done using JavaScript).
See here for some info about media queries http://webdesignerwall.com/tutorials/css3-media-queries
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Check this article out...
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible
Here's the problem. I have an image:
<img alt="alttext" src="filename.jpg"/>
Note no height or width specified.
On certain pages I want to only show a thumbnail. I can't alter the html, so I use the following CSS:
.blog_list div.postbody img { width:75px; }
Which (in most browsers) makes a page of uniformly wide thumbnails, all with preserved aspect ratios.
In IE6 though, the image is only scaled in the dimension specified in the CSS. It retains the 'natural' height.
Here's an example of a pair of pages that illustrate the problem:
The list, which should show thumbnails
A single blog post, which shows the full-size image.
I'd be very grateful for all suggestions, but would like to point out that (due to the limitations of the clients chosen platform) I'm looking for something that doesn't involve modifying the html. CSS would also be preferable to javascript.
EDIT: Should mention that the images are of different sizes and aspect ratios.
Adam Luter gave me the idea for this, but it actually turned out to be really simple:
img {
width: 75px;
height: auto;
}
IE6 now scales the image fine and this seems to be what all the other browsers use by default.
Thanks for both the answers though!
I'm glad that worked out, so I guess you had to explicitly set 'auto' on IE6 in order for it to mimic other browsers!
I actually recently found another technique for scaling images, again designed for backgrounds. This technique has some interesting features:
The image aspect ratio is preserved
The image's original size is maintained (that is, it can never shrink only grow)
The markup relies on a wrapper element:
<div id="wrap"><img src="test.png" /></div>
Given the above markup you then use these rules:
#wrap {
height: 100px;
width: 100px;
}
#wrap img {
min-height: 100%;
min-width: 100%;
}
If you then control the size of wrapper you get the interesting scale effects that I list above.
To be explicit, consider the following base state: A container that is 100x100 and an image that is 10x10. The result is a scaled image of 100x100.
Starting at the base state, the
container resized to 20x100, the
image stays resized at 100x100.
Starting at the base state, the
image is changed to 10x20, the image
resizes to 100x200.
So, in other words, the image is always at least as big as the container, but will scale beyond it to maintain it's aspect ratio.
This probably isn't useful for your site, and it doesn't work in IE6. But, it is useful to get a scaled background for your view port or container.
Well, I can think of a CSS hack that will resolve this issue.
You could add the following line in your CSS file:
* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }
The above code will only be seen by IE6.
The aspect ratio won't be perfect, but you could make it look somewhat normal.
If you really wanted to make it perfect, you would need to write some javascript that would read the original picture width, and set the ratio accordingly to specify a height.
The only way to do explicit scaling in CSS is to use tricks such as found here.
IE6 only, you could also use filters (check out PNGFix). But applying them automatically to the page will need javascript, though that javascript could be embedded in the CSS file.
If you are going to require javascript, then you might want to just have javascript fill in the missing value for the height by inspecting the image once the content has loaded. (Sorry I do not have a reference for this technique).
Finally, and pardon me for this soapbox, you might want to eschew IE6 support in this matter. You could add _width: auto after your width: 75px rule, so that IE6 at least renders the image reasonably, even if it is the wrong size.
I recommend the last solution simply because IE6 is on the way out: 20% and going down almost a percent a month. Also, I note that your site is recreational and in the UK. Both of these help the demographic lean to be away from IE6: IE6 usage drops nearly 40% during weekends (no citation sorry), and UK has a much lower IE6 demographic (again no citation, sorry).
Good luck!