Question

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

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

Answer 1

有很多方法可以解决这个问题。您可以尝试使用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。

MVC图像处理 - 我可以使所有图像看起来大致相同吗？

1 个答案: