Using CSS class styles to adjust image size

something to consider .. let us say that you start off with an image that is, for arguments sake, 1000×1000 pixels. If you just resize the width, youre going to end up with images that are not scaled.

ie, you may end up with an image that is 500x1000px (assuming you resize the width to 500px)

If you want to properly do that, you need to resize the width and the height. (500x500px)

And please, be aware that what you are wanting to do does not work in all browsers. The proper way, in this case, to resize images, is locally using an image editor.

The reason why it works within the wordpress image upload thing, is because it does the scaling and creates a thumbnail (if I remember correctly).

Hey! A fellow MNan!

Can’t you just set a “max width” (or something) parameter or something that will adjust the height and width and keep them in scale?

not using css no, nothing in CSS is going to do any scaling for you, that I am aware of. and lets go a step further..

.img {
width: 500px;
height: 500px;

what happens when you apply that to an image thats 1200×640?

its completely out of scale.

But what if I just use

.img {
width: 500px;

?

try it and see.

I’m a little fuzzy on setting a new class style.
I don’t want ALL my images to be 500px wide.

Could i just assign a new style in my stylesheet like this?

..img-500 {
width: 500px;

And then refer to this in my post somehow?… this is where I get a bit confused.

yeap, thats exactly what you do.

.img-500 {
width: 500px;

one dot

then do this in a post:

<img class="img-500" src="mybigimage" alt="my big image" />

Remember, too, that scaled images usually look kind of “crunched”. And, of course, using very large image files will increase bandwidth.

It’s a PITA but it’s better to scale them to the actual display size beforehand. There are some photo-editing applications that allow you to do this in batches (Photoshop does, for example, although the batch editing feature is not incredibly user-friendly).

K Thks.

I’ll try a few things and report back.

Cheers!

I think I have the “img-500” code working pretty well.

Check it out at https://www.snowless.com/wordpress and let me know if it is not working for you. (Click the images to see my lightbox function… I kinda like it)

hmm, yeah that looks pretty nice in firefox and ie6 ??

Not to bore you with additional details, but I’m using SmugMug to host my images. They save 8 different sizes on their servers for each photo. I’m using the Medium size (600px wide) for the image on the blog and linking to the Large (800px wide) for the lightbox images.

lol, actually im at work, and just locked my keys in my jeep, so im far from bored. Know any cheap locksmiths?

I did check the original image size so I saw they are actually at 600px. Theyre very nice photos. Abouth the only thing I would do, if i were you, is take a look at how https://www.browsercam.com sees those. Pick a single post page with an image, and plugin it in over there. its free for 24 hours.

Don’t know cheap ones, but Kat Keys in downtown St. Paul is very good.

Thanks for the tip on browsercam… but I think I would need much more than 24 hours to work out all the problems I seem to be having.