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

Question

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

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

Answer 1

您可以尝试多种方法来解决这个问题。您可以尝试使用 overflow:hidden; 来设计图像容器的样式，而不是限制图像的高度(如果您正在这样做 - 我怀疑这可能是它拉伸(stretch)的原因)。

这是一个例子:

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 .