0

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

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

我怎样才能让所有图像变小，但要保持比例？

4

2 回答 2

4

保持比例的一种方法是在 css 中设置宽度值，但随后图像的宽度和高度是未知的，具体取决于起始图像。这将是修复拉伸图像的最简单方法。但是你不会知道上面提到的高度。

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

剃刀密码

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

CSS代码

.parentDiv img{
    width: 150px;
}
于 2012-09-07T07:19:51.077 回答
1

你问得好。然而，做到这一点的一种方法是要求用户使用 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-07T07:13:52.057 回答