How to show images with keeping their proportion in mvc3? - asp.net-mvc-3

Question

In mvc3 Products have more images and there is standard box size that all images seems in that in view.
Users enter images in different sizes: 200x800, 2200x500 ..etc. But I must show all images in standard box in 150x120 sizes. Most images stretchs horizontal or vertical in 150x120 size box and seems very bad.
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" width="150" height="120" alt="" />
How can I do all images get small, but to keep proportion ?

Answer 1

one way to keep propotions is to set the width value in css, but then the image will have the width and the height is unknown depending och the startimage. This will be the simplest way to fix the streched images. But you will not know the height as mentioned.
And ofc you must load the big image (big transfer size), so this may not be a propriate solution.
razor code
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" alt="" />
css code
.parentDiv img{
width: 150px;
}

Answer 2

You got good question. However one way to do this is to ask user to upload in some proportion using javascript.
E.g your input control should be like
<input id="ImageFile" name="ImageFile" type="file" onchange="check_filesize(this.value,'upload');" />
And in javascript your can check file size and etc.
Another is to make use of ImageResizeClass and in your Upload Control you can resize the file to match your expectation size to shown in div.
So your upload controller would be something like following...
public ActionResult Upload(Image image, HttpPostedFileBase ImageFile)
{
ResizeImageHelper resizeImageHelper = new ResizeImageHelper();
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + ImageFile.FileName, 640, 480, false);
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + "thumb" + ImageFile.FileName, 74, 74, false);
image.imageLocation = ImageFile.FileName;
image.imageThumb = "thumb" + ImageFile.FileName;
imageRepository.Add(image);
imageRepository.Save();
}
This way you can make sure to show the image perfectly.
Hope you understand and this helps.