处理用户上传的图像的最佳方法是什么？

Question

我正在尝试创建一个需要显示图像的布局。我试图通过使用width: 100%; height: auto; 来处理它，但是图像的比例总是会破坏页面的外观。

例如：

https://jsfiddle.net/iDaniel19/sLrntpcw/1/

我一直在查看付费模板/网站以了解它们如何处理图像，并且它们都使用固定的高度和宽度，具体取决于页面上看起来合适的尺寸。

我正在使用像 col-xs-3 这样的引导类。现在让我们假设用户上传了一张 1230x415 或 415x1230 的图片。现在我有两种方法可以在页面上显示它：

1. 使用width: 100%; height: auto;。这会弄乱布局的外观。

2. 包含由col-xs-3 决定的宽度和一些预定义高度的图像。这会弄乱图像的纵横比。

3. 裁剪图像？？

实际上如何处理用户上传的图片并保持页面美观？

Answer 1

尝试在图像上使用最小和最大高度。

.event-image > img {
    width:100%;
    min-height: 200px;
    max-height: 300px;
    overflow:hidden;
}

Answer 2

这应该保持您想要的高度和适当的纵横比。

CSS:
body{margin: 0;padding:0;}
#styled>div{
    position:relative;
    margin: 0 auto;
    max-width:400px;
    text-align:center;
    border:1px solid lime;
    }
#styled>div>img{
    max-height:200px;
    }
#not-styled>div{
    position:relative;
    margin: 0 auto;
    text-align:center;
    border:1px solid blue;
    }


    HTML:
<div id="styled">
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>
    <div id="not-styled">
        <p>NOT styled</p>
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>

你可以在webbdesign.ca/photo_aspect_example.html看到一个例子