Question

在mvc3中，产品有更多的图像，并且标准的盒子大小可以看到所有图像。用户输入不同尺寸的图像：200x800,2200x500 ..等。但我必须在150x120尺寸的标准盒子中显示所有图像。大多数图像拉伸水平或垂直150x120大小的盒子，看起来非常糟糕。

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

如何让所有图片变小，但保持比例？

Answer 1

保持比例的一种方法是在css中设置宽度值，但是然后图像将具有宽度，并且高度未知取决于startimage。这将是修复拉伸图像的最简单方法。但你不会知道所提到的高度。

并且你必须加载大图像（大转移大小），所以这可能不是一个合适的解决方案。

剃刀代码

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

css代码

.parentDiv img{
    width: 150px;
}

Answer 2

你有个好问题。但是，一种方法是要求用户使用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();

}

这样您就可以确保完美地显示图像。

希望你明白，这会有所帮助。

如何在mvc3中保持比例显示图像？

2 个答案: