Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Chris Matulich
Chris Matulich
2,986 Points

Images distorting in responsive website... Why? How to stop it?

If you visit this site I've built, you'll notice that when you mess with the browser size, the social media icons and the logo distort while the browser size is being adjusted. In some cases, it seems they actually STAY distorted after adjusting the browser window... This does not occur in Firefox, but it does occur in Safari and Chrome...

Take a look at what I mean here:

http://www.craftandcog.com/about.html

The images are png's set to pixels and / or percentages using CSS.

I notice that other sites images and icons do not do this when I resize the browser window. How do I fix this problem??

Thanks for reading!

  • Chris

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Hi Chris, have you managed to solve the issue ? I'd like to help you if needed, I've just tested and your images aren't distorted when resizing the window.

Chris Matulich
Chris Matulich
2,986 Points

Hello Geoffrey. Thanks for your response, I would really appreciate your help. I am using a macbook pro and a desktop 2009 iMac… What are you using to view it? I am seeing the images distort on both computers when I visit the site and resize the browser window with Safari and Chrome… I was hoping another web designer would have encountered this problem and know a better way to format the images… Perhaps I should try to use SVG's instead of PNG's? I guess I have never run into this problem in the past because previously the sites I've built were not responsive.

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Ok Chris, I'm using Linux Mint, I tried to reproduce your issue using differents browsers such as chrome and firefox, and I couldn't see it. As you talked to me about the OS, I tried to visit your website using a virtual machine and windows 7, with IE9 and this is still the same, nothing to spot. Could you simply take a screenshot of the issue ? Unfortunately I don't own a mac so I can't test.

About SVG, why not giving a try !? If I were you, I would test, however, according to canIuse svg isn't well supported from IE9 to 11, but if you read about it by hovering each version of IE, It seems there is a workaround to solve this issue.