Question

我试图创建一个需要显示图像的布局。我只是尝试使用col-xs-3处理它，但图像的比例总是会破坏页面的外观。

例如：

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

我一直在查看付费模板/网站，看看他们如何处理图片，所有这些都使用固定的高度，宽度取决于页面上的大小。

我正在使用像width: 100%; height: auto;这样的引导类。现在让我们假设用户上传图片1230x415或415x1230。现在我有两种方法可以在页面上显示它：

使用col-xs-3。这会弄乱布局的外观。
包含由static (int count, double sum) Tally(IEnumerable<double> values) { int count = 0; double sum = 0.0; foreach (var value in values) { count++; sum += value; } return (count, sum); } ... var values = ... var t = Tally(values); Console.WriteLine($"There are {t.count} values and their sum is {t.sum}");决定的宽度和某个预定义高度的图像。这会弄乱图像的纵横比。
裁剪图像??

如何实际处理用户上传的图像并保持页面看起来不错？

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

查看示例

处理用户上传图片的最佳方式是什么？

2 个答案: