No announcement yet.

stop image from resizing

  • Filter
  • Time
  • Show
Clear All
new posts

  • stop image from resizing

    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 =(

  • #2
    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.
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert

    Follow Us on Twitter


    • #3
      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.


      • #4
        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.
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert

        Follow Us on Twitter