View Pic Gallery Image Not Showing Properly

When you try to view public pictures they show up right on the homepage, and where you are viewing them in a scaled down size and seeing multiple images like on the homepage under the Photo Gallery. However if you click on a photo on the homepage to view it's details, comments, and bigger size if the picture is bigger than the 372px width the rest gets cut off. Is there a way to make it resize the image to fit within the 372px column? I have tried looking through various code files, and I must be overlooking it. Can someone please tell me how I can get it to show the entire images within the 372px.

For example look at my homepage at http://www.p90xspace.com/site/ and click on the first picture in the photo gallery box. That should take you here http://p90xspace.com/site/photo/gallery/P90X-Transformation (and no this picture is not me) but notice how it cuts off the majority of the image because the image is not being resized.

Thank you for your help.

Have you looked in the admin panel for the little box that asks maximum pic height & width?

Yea, I seen that. But, that limits the size of the image a user can upload. I want it to be able to shrink the images too fit. Most pictures that people are going to be uploading are going to be larger images, and if they can not upload them, they are not going to know how to shrink those images.

Can I have it shrink the images using html/css code, it is shrinking the images on every page except the picture detail page so I know it's possible. What do I need to change and where?

take a look at your general.css page and see what you find.  But I'm betting that this is over in the inc/ folder somewhere.

I have looked in general.css, viewPhoto.css, as well as several others.

From what I see the image is set as a background of the table in viewPhoto.css. I can also change the margin left or right, and the background will move. However, it seems like there is nothing to actually control the display size of the image.

Here is the css code:

div#viewFile

{

background-position: relative;

background-repeat:no-repeat;

width: 365px;

height: 365px;

margin:auto;

}

If you change the background position the image will move, so this is control at least the position aspect of the image. However the width that is stated here seems to control the height and width of the table but the image just overruns past the table dimensions and cuts off the excess of the image. 

So...Is there some css code I can add to this file to control the specific width and height of the background image?