ed
Member
Registered: 10th Sep 03
User status: Offline
|
Not sure if this should go here or in Geek Day or anywhere else. But could something like this be added to the site CSS style sheet:
code: img{
max-width: 100%;
height: auto;
}
So that when someone posts a massive image, it gets scaled to the width of the area of the page it sits in. Would need a better selector than that, but it gives the idea.
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
U2U Ian?
|
Bart
Member
Registered: 19th Aug 02
Location: Midsomer Norton, Bristol Avon
User status: Offline
|
I think there would be more to it than that?
when a large image is posted, it obviously stretches the thread container as well, so the thread container would need a fixed width.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Nope, that's all you need. Can try it for yourself if you've got a developer console on your browser.
|
kz
Member
Registered: 9th Aug 02
Location: Southend, Essex Drives: Mini Cooper S
User status: Offline
|
Please do this, please.
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
Dont do this, it makes the image jaggy especially if its very large.
If youre going to do anything do what other forums do and present a resized image say 640x480 thats clickable to open the fullsize image
|
Ian
Site Administrator
Registered: 28th Aug 99
Location: Liverpool
User status: Online
|
I like the resize and click to show full, anyone got code for that?
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
https://www.phpbb.com/customise/db/mod/reimg_image_resizer/
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
quote: Originally posted by Steve
Dont do this, it makes the image jaggy especially if its very large.
No it doesn't. Unless you're using IE6.
Here's how I'd do it using jQuery Ian:
I'd add a responsive image class to the stylesheet and set the images to have this by default,
code: .responsive-image.shink{
max-width: 100%;
height: auto;
}
Then you could use this little script to toggle the size:
code: $('.responsive-image').toggleClass('shrink')
Could obviously hand code it to toggle the class if you're not using jQuery...
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Could do it in pure css if you just wanted to expand the image on hover too:
code: .responsive-image{
max-width: 100%;
height: auto;
}
.responsive-image:hover{
max-width: auto;
height: auto;
}
[Edited on 28-04-2013 by ed]
|
_Allan_
Member
Registered: 24th Mar 04
User status: Offline
|
or just ban stan_the_man for posting stupid sized images.
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
quote: Originally posted by ed
quote: Originally posted by Steve
Dont do this, it makes the image jaggy especially if its very large.
No it doesn't. Unless you're using IE6.
Here's how I'd do it using jQuery Ian:
I'd add a responsive image class to the stylesheet and set the images to have this by default,
code: .responsive-image.shink{
max-width: 100%;
height: auto;
}
Then you could use this little script to toggle the size:
code: $('.responsive-image').toggleClass('shrink')
Could obviously hand code it to toggle the class if you're not using jQuery...
leaving it up to the browser to provide its own aliasing isnt very good practice, its also not very good for mobile devices, eg if i want to pinch in its just going to keep adjusting itself all the time and il never get the see the full res
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
You're clearly not very up to date with current web design practice. I suggest you have a little read about responsive design before you start telling me what's right and wrong.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Also, using responsive image scaling works just fine on mobiles.
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
I'm not saying it won't work I'm saying it won't give me access to see the full res which is fairly important to most people I'd imagine.
The same goes for desktop machines too
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
Any modern big sites I use don't use it either, BBC, Facebook etc.
I suggest you brush up on making carbon fibre rooves.
You're making me angry I think I may fight u
[Edited on 28-04-2013 by Steve]
|
LeeM
Member
Registered: 26th Sep 05
Location: Liverpool
User status: Offline
|
Pistonheads does this, much better in an image heavy thread
|
Hammer
Member
Registered: 11th Feb 04
User status: Offline
|
quote: Originally posted by _Allan_
or just ban stan_the_man for posting stupid sized images of retarded tattoos.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
quote: Originally posted by Steve
Any modern big sites I use don't use it either
http://www.time.com/time/
http://thenextweb.com/
http://www.microsoft.com/
http://www.ge.com/
http://www.starbucks.com/
|
Balling
Premium Member
Registered: 7th Apr 04
Location: Denmark
User status: Offline
|
quote: Originally posted by Ian
I like the resize and click to show full, anyone got code for that?
Please don't use this. Ed's idea is much better, more "correct" and more future proof.
Image size should adjust to the browser window, not to a preset size. This better accommodates differences in screen size and resolution.
 
|
Balling
Premium Member
Registered: 7th Apr 04
Location: Denmark
User status: Offline
|
quote: Originally posted by Steve
Any modern big sites I use don't use it either, BBC, Facebook etc.
"Big" sites are quite often the very last to implement best practice web design. With good reason too, as the rules and technology moves so fast they could be redesigning their website two times a year to take in to account the latest developments.
 
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
quote: Originally posted by Steve
BBC
Their mobile site implements responsive images:
http://m.bbc.co.uk/news
[Edited on 29-04-2013 by ed]
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
As does the Wiki mobile site:
http://en.m.wikipedia.org/wiki/File:Non-human_penises_Iceland_Phallological_Museum.jpg
Have I made my point yet?
|
Steve
Premium Member
Registered: 30th Mar 02
Location: Worcestershire Drives: Defender
User status: Offline
|
Not really addressing my issue of wanting access to the original res
A compromise would be perhaps to make it clickable to load the full version, the wiki link gives options to load higher res's however that wouldn't really work on a forum.
So that takes us back to my original idea again of having smaller versions that you click to open.
Not saying those smaller versions couldn't be responsive mind
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Oh, so now you're saying it's ok to have responsive images? I thought it was bad practice and no other websites use it?
|