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

Byron Farrell
Byron Farrell
5,700 Points

Scaling images in websites

Hi,

I have started design/developing a portfolio website and I have run into an issue. I am trying to add a cover photo the the top of my page that is 100% wide and 300px tall. The problem I am having with this is that it is really hard to find images that fit that size. I see lost of website with long cover photos has their header. Am I doing something wrong or will I have to manually resize all images down, which usually causes warping.

I know the answer to this seems simple "crop and image or resize one to fit" but I just feel like I am missing something.

Thanks for your time!

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points

Hey Byron,

I don't do much design, but I used to work with images quite a bit. There is no "magic" way of doing it with just HTML or CSS. You often will need an image editor to crop it to a relational size to match what you are looking for. "Finding" just the perfect image at the perfect size is often not the case. If cropping is all you need to do, you don't need a high end editor... just one that can crop to a size you specify.

On another note: If you are searching the internet for images to use on your site... be very aware of copyrights and licences. Almost all images online are not free to use and require proper licensing. So, just be careful... infringement can be very problematic and expensive.

Keep Coding! :dizzy: