MVC图像处理 - 我可以使所有图像显示大致相同吗？

我正在创建一个MVC 4应用程序，其中包含用户上传图像的功能。然后我在另一个视图中显示一些这些图像。我允许用户上传最大尺寸为10MB的图片。然后，我使用WebImage (System.Web.Helpers)将图像大小调整为800 x？，保持相同的宽高比，然后将其保存到我的数据库。MVC图像处理 - 我可以使所有图像显示大致相同吗？

当我在我的视图中显示这些图像时，尽管我调整到800 x？的大小，但由于它们最初拍摄的方式，它们都是形状和大小。有没有一种方法可以显示这些图片，使它们看起来都具有相同的宽度和高度，而没有出现严重扭曲的图像？

来源

2013-04-27 Randy Minder

您能否包含他们如何显示屏幕截图？它是一种固定宽度/高度的网格，图像在单元格内伸展吗？ – Artless 2013-04-27 17:52:07

有很多方法可以尝试解决这个问题。您可以尝试使用overflow:hidden;对图像容器进行造型，而不是限制图像的高度（如果您正在做这件事 - 我怀疑这可能是其延伸的原因）。

下面是一个例子：

HTML

<div class="main"> 
    <img class="absolute" src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" alt="" /> 
</div>

CSS

.main{ 
    overflow:hidden; 
    position: relative; 
    height: 200px; 
    width:300px; 
} 

img.absolute{ 
    left: 50%; 
    margin-left: -200px; 
    position:absolute; 
}

Demo here

或者，你可以看看CSS口罩。以下是CSS中各种类型的蒙版教程：link。

来源

2013-04-27 18:00:53 Artless

如果我不限制图像的宽度和高度，为什么我需要使用overflow设置样式：hidden？ – 2013-04-27 18:08:30

我假设你在某种格子中显示它，并希望事物对齐，从而限制高度并创建拉伸？就像我之前所说的那样，这个问题的截图会有帮助。 – Artless 2013-04-27 18:15:13

MVC图像处理 - 我可以使所有图像显示大致相同吗？

回答

相关问题