Looking for a simple way to resize image to browser.

wild_eyed

hi there, i have an image on the front page of a website, its centered both horizontal and vertical using css, i want the image to resize depending on the resolution of the user's browser.

can i get a pointer or two? and a redirect

the_syco

Would percentage work? As in, if the page is huge, 80% will be 80% of huge, but if the page was small, it's be 80% of small? Works okay in html, not sure about css, though

wild_eyed

im should admit im a complete amateur here. but i believe jquery is what people use?

Giblet

width:100%; height:auto

in css.

Placebo

what giblet said
or see: http://css-tricks.com/perfect-full-page-background-image/

Liam Byrne

Placebo wrote: »

what giblet said
or see: http://css-tricks.com/perfect-full-page-background-image/

Surely that "perfect" is a bit of a misnomer ?

Scaling an image beyond its original size is a bad idea, as it will look crap (and even attempting to average out a size will give a large download size) while scaling it smaller won't exactly give decent quality either.

And that's not even taking into account the aspect ratio of the image, which could be different to the screen (desktop, laptop, netbook, old-fashioned 4:3, mobile device, etc)

Where do people find the best place to strike a balance between all those considerations ?

Giblet

I find large background images (1920x1080) tend to scale up to an acceptable standard when going higher, especially if there's a browser that does resampling. Now, it's not ideal, but there's a reason why it's a background image and not one to be used as a main banner or hero image.

Of course, when you are scaling down, or framing an image (ie: 16:9 image being used on a 4:3) it's important to ensure things like ensuring copy is still visible if you are using an centred image and cutting off the sides. Then there is mobile, which is a whole bag of spiders (do you serve a different image or scale the large one down). It's solvable using media queries in some respects, but <img> tags are still going to be an issue. Placeholders + javascript? Looks rubbish without javascript and having a pop in of images. Serve lower quality images and load higher quality which are in view for a target device? (ie: keep low res for mobile, and higher res for high resolutions). Still needs javascript. I saw an interesting article on A List Apart calling for a multi sourced image tag which uses media query. Which would be awesome, but I doubt we'll get that for a long while. I think the answer is that you optimised your images better, and if you're going to use a particularly huge image, have it so a media query can handle the different sizes. (either through a css background image, or javascript)

Placebo

Liam Byrne wrote: »

Surely that "perfect" is a bit of a misnomer ?

Scaling an image beyond its original size is a bad idea, as it will look crap (and even attempting to average out a size will give a large download size) while scaling it smaller won't exactly give decent quality either.

And that's not even taking into account the aspect ratio of the image, which could be different to the screen (desktop, laptop, netbook, old-fashioned 4:3, mobile device, etc)

Where do people find the best place to strike a balance between all those considerations ?

Ball is in the designers court, if hes smart, he will have the background image fading out to a single color or gradient, or have some aspect of it repeating behind the 'background'. I cant see busy images working well as a background in the first place.
Obviously it depends ont he image, I used a small radial gradient as a backup for my background http://iamjpg.com/acute/images/radial_bg.png
so if the css gradients fail, that will show up, scaled at 100%, you can try resize it in photoshop, it doesnt look bad at all.
Ratio would be an issue, consider really wide screen monitors ? Multisourced image tags will be the future, i guess right now we can compensate with some javascript [get browser size, set different backgrounds accordingly] OR use media queries

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

Giblet

The resizing used in something like a gradient is awesome because the resampling algorithm used by most browsers will resample the banding aliasing away, leaving the gradient pretty much as is. (ie: it samples two colours and blends them anyway, so free gradient)

You can effectively create a 2x1 image, and resize it in CSS to get a gradient (you can also create a radial gradient using 3x3, but it doesn't bode too well, resizing your image placebo, to 15x15 still works well though)