Image height & width in CSS

Community Forums Forums Design Tips and Tricks Image height & width in CSS

This topic is: resolved

This topic contains 1 reply, has 1 voice, and was last updated by  jodzeee 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #45106

    jodzeee
    Participant
    Post count: 231

    I’ve noticed that some of my images are fuzzy in Chrome, but not in Firefox. Using the inspector, I turn off “max-width: 100%” and I get more clarity, but I assume that’s there for a reason and I shouldn’t remove that attribute. And in this case, if I do, it screws up some placeholders I have. I’ve got both the image height and width set on the fuzzy images, but not on the placeholders (I assume that’s why they’re getting stretched).

    I guess my questions are: What does this CSS do? What am I doing wrong? How do I prevent my images from being resized and turning fuzzy/blurry?

    `img {
    height: auto;
    max-width: 100%;
    }`

    I’m using the Agency theme and the images I’m referring to are the logos/badges on the home page of the site referenced below.

    http://www.uncorkeddesign.com/clients/bolt-hoffer-3/
    #45143

    jodzeee
    Participant
    Post count: 231

    Okay, I figured it out. I had the images placed in a table and because I didn’t have this:

    `table { border-collapse: collapse; }`

    The images were being squished. I’m not sure I understand why though. Especially since it was showing up in Chrome but not in Firefox.

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Image height & width in CSS’ is closed to new replies.