Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
CSS & HTML: scaling image in div to fit full screen but maintain aspect ratio
Bottom of Page1 to 6 of 6
-
I'm having a real horror story with this. From what I gather it's pretty much impossible. I've got a page with a div that holds an image (a pretend background rather than setting it as a background). When the page is resized the image resizes itself using a bit of javascript to fill the whole screen, both horizontally and vertically. The problem is that IE doesn't handle auto and 100% height/widths very well. It works kinda great in firefox but in IE it's a bit naff.
I've gotten quite close but just need help tidying it up...
http://tinyurl.com/383x5m
I'm wondering if anyone here has managed to get something like this working in a nicer fashion and can show me how? I've already tried jumping out the office window but there are bars stopping me from escaping.
Another smaller issue I'm having is getting my middle section of squares to wrap correctly but at the moment they sometimes overlap with the square in my right hand section.
Hope you can help.
KJ. -
1.What are you trying to accomplish? Like what is the point of the background image growing? Why not just make a repeating image?
Seems like making the image grow is a bad idea, especially because of pixilation and annoyance on the part of usability.
2.Can you give a screenshot of when the right square is not behaving correctly? I am not sure what you mean.
I hope we can provide you with the help you need. :D -
The image that you can see at the moment is a test image, the final image won't be a pattern and so cannot be tiled. I totally agree with you on the pixilation and usability side of things, especially when you consider the file sizes involved for larger images, but I have to go with what I've been given :(
A screen shot of my second point: http://tinyurl.com/2f5jww
As you can see the two squares overlapping at the far right. The outline only square should have wrapped to the line below.
Thanks for replying :) -
What browser is the box overlap happening in?
One thing I noticed is that you forgot to take into account that setting a border adds onto the total width of the element.
So your boxes are really 117px wide, not 115. (padding also adds to the total width. Just something I noticed, and thought if you had a pixel pusher(someone who wants it to look exactly like the psd file) than you should fix that. :D Not really a big deal unless you are working with exact widths.Thankful People: KJ -
I'll take a look at that. The browser that is giving me problems, and the one that the client uses throughout the workforce, is Internet Explorer. Firefox is perfect. I've tried another approach and re-wrote my divs but still the issue remains.
I'll fix the border thing and see if that helps it any.
Thanks again :) -
I've managed to get it working in most browsers except for Safari. The scalling won't work, but so far so good. I think I've achieved a fair bit, still I'd much prefer to have built this in Flash or not had this scaling background thing... but it's a lesson.
1 to 6 of 6