Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
How do I scale images with css using a max-width and max-height?
I want to scale my article images in different circumstances. Large in a gallery and smaller on the front page.
I also would like to give them a max-height and a max-width. Any help or tutorials would be appreciated. Also up for discussion would be browser support.
Art Rogue – Fine Art Photography
Offline
Re: How do I scale images with css using a max-width and max-height?
max-width and max-height, should not be used, or if you use them, you will need to use also seperate stylesheets for older browsers, like IE6 and below, that use height and width for sizing images.
But in general it should work with newest browsers: Firefox 1.5 and above, Internet Explorer7, Opera 8 & 9 and Safari 3b.
Scale is quite something that you could not do, if you want keep the original rezolution. But it could be done by TXP’s plugin, that check images properties and then choose which width/height to use, and how to scale.
CSS, should be something like this:
#frontpage img {
max-width: 200px;
max-height: 200px;
}
#gallery img {
max-width: 500px;
max-height: 500px;
}Cheers!
Offline
Re: How do I scale images with css using a max-width and max-height?
agree with gocom. you definitely shouldn’t be scaling images with css.
Offline
Re: How do I scale images with css using a max-width and max-height?
Why should I not be using css to scale images? If I need to display images at different sizes it makes no sense to have to make several sizes of the same image. I figure as lonk as I keep the file sizes down. I would also lose control of txp:article_image.
What is the Alternative? Javascript or something else?
Art Rogue – Fine Art Photography
Offline
Re: How do I scale images with css using a max-width and max-height?
Why should I not be using css to scale images?
Because CSS can only scale height or width at time – not both, if you wan’t to keep the original aspect ratio. CSS doesn’t count aspect ratio – because CSS can’t do that. You need a plugin to do that.
Plugin could scale images with inline-style althought – so you can use CSS, but not at by it self. And Javascript could easily done that, but it’s browserside code – so it’s up to you if you use it. But JS could count aspect ratio.
Afterall, I haven’t spoke anything about multiple images – those you don’t need. Keyfactor is PHP + CSS = plugin. But remember that images that are sized with CSS, aren’t any smaller in data, than the original ones.
Cheers!
Offline
Re: How do I scale images with css using a max-width and max-height?
I’m not really concerned about file size.
I found this article but I can’t make it work.
Art Rogue – Fine Art Photography
Offline
Re: How do I scale images with css using a max-width and max-height?
mattmikulla wrote:
Why should I not be using css to scale images?
For the same reason you shouldn’t use HTML to resize images … [1] you are forcing the user to download a file that is larger than necessary for the rendering (you say file size doesn’t matter, but put nine 100kb full-size images on one page rendered as “thumbnails,” and you may change your mind), and [2] images shown at anything other than 100% of their native size generally render like crap.
What is the Alternative? Javascript or something else?
So you need one full size image, with a thumbnail? Two sizes per image? I’m not sure I understand why <txp:article_image /> and <txp:article_image thumbnail=“1” /> wouldn’t provide what you need. If you are looking to create images of specific proportion, meaning, change a vertical to square, that’s outside HTML or CSS. You would need to do that in your image prep.
Last edited by reid (2007-09-04 18:01:36)
TextPattern user since 04/04/04
Offline
Re: How do I scale images with css using a max-width and max-height?
as already mentioned, rescaled images via html/css looks absolutely terrible in most (re:windows) current browsers anyway.
Last edited by iblastoff (2007-09-04 18:50:27)
Offline
Re: How do I scale images with css using a max-width and max-height?
[quote]rescaled images via html/css looks absolutely terrible in most (re:windows) current browsers anyway.[/quote]
Is there any solution?
Offline
Re: How do I scale images with css using a max-width and max-height?
barcajunior wrote:
[quote]rescaled images via html/css looks absolutely terrible in most (re:windows) current browsers anyway.[/quote]
Is there any solution?
if the two sizes TXP gives you (regular image and thumbnail) aren’t enough and you don’t want to manually upload more copies of the same photo at different sizes, give this a shot
Last edited by iblastoff (2008-01-04 16:12:53)
Offline
#11 2008-01-04 18:18:57
- Sono Juventino
- Member
- From: Skedsmo, Norway
- Registered: 2007-12-22
- Posts: 81
Re: How do I scale images with css using a max-width and max-height?
I’ve done exactly what you looking for a my site, but my smaller images is still kept within their ratio, so Css works fine for me.
Offline
#12 2009-02-25 02:07:42
- drow
- New Member
- Registered: 2009-02-25
- Posts: 1
Re: How do I scale images with css using a max-width and max-height?
you might also try this…
img.thumbnail {
max-width: 150px;
max-height: 150px;
width: auto;
height: auto;
}
Offline