I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone
Related
I am aware that in order for browser native lazy loadig to work properly (in chrome), you need to define image height and width.
The problem is that i need my images to be responsive, so i am not able to set absolute height and width. Yet i still want to lazy load these images to increase my website's performance.
I tried hacking my way around this by wrapping the images in a div that has an aspect ratio, then setting the image height and width to 100%. Unforunately it seems that only absolute dimensions work.
Is there even a possible workaround to natively lazy load images without absolute dimensions, or should i use a javascript library to do this (or, are they not able to fix this as well)?
side note: i noticed that this is only a problem in chrome. whats the point of this technique if you cant use it on responsive images like 99% of us need.
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
I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.
You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};
can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet
Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo
Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.
The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/
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.