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
kabir k
Courses Plus Student 18,036 PointsTrouble with my profile photo for the "About page"
I'm having trouble with displaying my profile photo on the "About page" properly. This could be because my image is not square. So, it started out as an oval shape after applying the CSS border-radius property. Tried doing some adjustments by giving the image the height and width attributes and finally got it to be circular, but the picture itself in the circle is somewhat compressed.
Any ideas on how to fix this? The size of the photo in the image folder is 640 x 480 pixels
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>biz man | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>biz man</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/Photo on 2011-10-06 at 11.48.jpg" alt="Photograph of biz man" class="profile-photo" width="300px" height="150px">
<h3>About</h3>
<p>Hi, I'm biz man! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing chess, watching a good movie, and more.</p>
<p>If you would like to follow me on Twitter, my username is <a href="http://bit.ly/dxqEjC">@bizworld</a>.</p>
</section>
<footer>
<a href="http://twitter.com/bizworld"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/pages/bizworld/330226860280"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>Ā© 2015 bizworld.</p>
</footer>
</div>
</body>
</html>
Jacob Christensen
13,171 PointsJacob Christensen
13,171 PointsI think it will alway stretch/compress it when resized, so I would edit the image to crop off some of the edges. There might be a more advanced way to do it in the CSS than what I know.