如何在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中保持其比例显示图像？

回答

相关问题