stop image from resizing

[fastergrace]

My newest problem is some of the images I put in on the homepage are resizing a ridiculous size when the window shrinks down. I put in a set size in the img tag and in the CSS and tried resize: none, yet the img stretches like a mad man. I also tried putting it under the different media tags in the CSS file like someone else suggested but no luck. I can't figure out why its doing this.

It is the 1,2,3,4 images in the how it works box. Welcome to Paleo on the Go LLC - Real Food Delivered

Any ideas?

I have been building set width sites for so long this is a huge learning curve =(

[thecartdesigner]

Already responded to your issue in the other thread.. That's ok though. Here it is again:

Get rid of the "resize:none;" all together it is not supported across all browsers.

Here is what you should do for example

img.howto-image {
float: left;
height: auto; <--CHANGE TO
resize:none; <--REMOVE
max-width: 50px; <--ADD
width: 100%; <--CHANGE TO
}

This should help

Edit: In regards to adding size to the img.

When adding size to an image you want to do it in a different manner now that your template is html5. You want to stick to css properties. So you will want to get rid of the height="#" and width="#" in the img string.

If you absolutely feel you have to do it inline, do it with inline style like so:

<img style="height:50px; width:50px;" src="image/path.jpg" alt="yadayada"/>


The other issue is that you should avoid using tables and learn to use divs with classes in place of the tables for more control and better all around usability.

[fastergrace]

Thank you thank you sir! I am going to put you on speed dial as I finish this up. =P

Why the need for the auto height and 100% width? Like I said, I am used to fixed widths, so I apologize for my ignorance. I have fallen behind the times and have a lot of make up to do.

[thecartdesigner]

height:auto; in this case will help the image resize to proper HxW scale when going from larger to smaller or vice versa.

You don't really need it on smaller images but when you work with larger images and there are other rules involved its good to use as a just in case so that your image doesn't become not proportional in view.