• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 197
  • Last Modified:

Photis are stretched in my website

Im a fairly new webdesigner and I am attempting my first project here and for the background I have the image taking up the whole background in a slideshow form but thphotos are stretching out. I have Photoshop to mess with the pixels but maybe I am not doing something right. The lady we have photographing it is also new photography so is there something she has to do on her end to make a rectangular photo to fit the screen without getting stretched out. She has like a $5000 camera so we have all the right tools just need help with what exactly we have to do. Any help here is appreciated Cheers!
1 Solution
Dave BaldwinFixer of ProblemsCommented:
You have to show us your code, at least the part for the pictures.  There are a lot of things you can do that distort pictures.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have expensive  power and air tools....but I am the last person you want to build your deck.  The same goes for having the best software, having the tools and using them are not the same.

It does not matter that the person who has the camera has a disposable camera or $5000 of new equipment, you can get a great full blown background image with either.  Making it look good will be dependent on the eye of the photographer and skills of the person using the tool.  Of course, you can throw an odd filter at it like instagram and all the sudden everybody is a pro.

There are a lot of ways you can do this and one is to use pure css.  There is also a project that has been around for a while that is worth looking into http://buildinternet.com/project/supersized/

The key is to make sure the image you start with was saved at a higher resolution then what you end up with.  You can always downsample your image, but you can't go up without blowing it apart (pixelate).  You don't have the get the image totally full screen size, you will see with the supersized demo that the image is increased in size a little by the javascript.  

You might also want to use a smaller image for for phones by using media queries.   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

If this is your first shot at web dev, spend a few days going over some fundamentals as it will make your life easier in the long run http://www.codecademy.com/tracks/web 

As far as using photoshop, there are a lot of tutorials.  Some are geared for print and some are geared for web. There is a big difference so make sure to start with web.   Most important is to understand the relationship with pixel size and image size http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7945a.html 

Just keep practicing too!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now