1

I'm creating an MVC 4 app that includes the ability for users to upload images. I then display some of those images in another view. I allow the user to upload images with a maximum size of 10MB. I then use WebImage (System.Web.Helpers) to resize to image 800 x ?, keeping the same aspect ratio, and then save it to my DB.

When I display these images in my view, they are all shapes and sizes because of the way they were originally taken, despite my resizing to 800 x ?. Is there a way I can display these pictures so they appear to all have the same width and height, without some of the images appearing grossly distorted?

4

1 回答 1

2

有很多方法可以尝试解决这个问题。您可以尝试使用 来设置图像容器的样式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;
}

演示在这里

或者，您可以查看 CSS 掩码。这是一个关于 CSS 中各种类型掩码的教程：链接。

于 2013-04-27T18:00:53.503 回答