Editing images and view of category List

Hi there

I have still not found the perfect solution for my problems here.

I cannot get the full photos of each category list to show on all screen sizes. I can for instance make the width very wide in the css to accommodate big screen resolutions but then on small screens the photo won’t change size to fit the screen. How can I make sure the full photo always shows no matter what the screen size?

Currently the home page is looking like this: http://nichuizen.co.za/

The actual dimensions of the photos that I am using there is 578 X 1102.

This is an example of one: Attachment 39538

My problem is that I am not getting the whole of the photo to show on the home page. If you compare the original photo with the category lists on the current homepage you can see how it is very "zoomed in" and you don’t get the full effect of the photo. If I change the width of the photo so that you can see more of the photo I am getting trouble with different screen sizes and as soon as I use a bigger screen the photo doesn’t fit at all. How can I edit the css that the photo gets adjusted according to screen size so that the full height of the photo is shown at all times?

This is how I am hoping to get it to look like: Attachment 39539

thanks for the help.