Image height & width in CSS

[jodzeee]

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/

[jodzeee]

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.

[Author]

Posts