如何在mvc3中保持其比例顯示圖像？

在mvc3產品有更多的圖像，並有標準的盒子大小，所有圖像看起來在視圖中。用戶輸入不同尺寸的圖像：200x800,2200x500 ..等等。但我必須在150x120尺寸的標準盒子中顯示所有圖像。大多數圖片拉伸水平或垂直150x120大小的盒子，似乎非常糟糕。如何在mvc3中保持其比例顯示圖像？

<img src="@Url.Content(Path.Combine("~/Uploads/Products/", @item.Date.Value.ToShortDateString(), @item.ImagePath1))" width="150" height="120" alt="" />

我可怎麼辦所有圖像得到小，但保持比例？

來源

2012-09-07 Jhoon Bey

你有好問題。但是，一種方法是要求用戶使用JavaScript以某種比例上傳。

例如，您輸入的控制應該像

<input id="ImageFile" name="ImageFile" type="file" onchange="check_filesize(this.value,'upload');" />

而在JavaScript中你可以查看文件大小等

另一種方法是使ImageResizeClass使用，並在您上傳控件，您可以調整文件以符合您預期的大小以div顯示。

所以上傳控制器將類似於以下...

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(); 

}

這種方式可以確保顯示圖像完美。

希望你明白，這有助於。

來源

2012-09-07 07:13:52

一種保留提示的方法是在css中設置寬度值，但隨後圖像的寬度和高度是未知的，取決於startimage。這將是修復拉伸圖像的最簡單方法。但是你不會知道所提到的高度。

而且你必須加載大圖像（大傳輸大小），所以這可能不是一個合適的解決方案。

剃刀代碼

<img src="@Url.Content(Path.Combine("~/Uploads/Products/", item.Date.Value.ToShortDateString(), @item.ImagePath1))" alt="" />

CSS代碼

.parentDiv img{ 
    width: 150px; 
}

來源

2012-09-07 07:19:51 mattematico

如何在mvc3中保持其比例顯示圖像？

回答

相關問題