處理用戶上傳的圖像的最佳方式是什麼？

我正在嘗試創建一個需要顯示圖像的佈局。我試圖通過使用width: 100%; height: auto;來處理它，但圖像的比例總是會破壞頁面的外觀。處理用戶上傳的圖像的最佳方式是什麼？

例如：

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

我一直在尋找付費模板/網站，看看他們是如何處理的圖像和所有的人都用一個固定的高度，寬度取決於什麼尺寸看起來頁面上良好。我使用的引導類如col-xs-3。現在讓我們假設用戶上傳1230x415或415x1230的圖片。現在我有兩種方法將其顯示在頁面上：

使用width: 100%; height: auto;。這將與佈局的外觀混淆。
包含由col-xs-3和一些預定義的高度決定的寬度的圖像。這會混淆圖像的寬高比。
裁剪圖像？

如何真正處理用戶上傳的圖片並保持頁面看起來不錯？

來源

2017-03-21 Bogdan Daniel

使用最大寬度：100％'，而不是'height'。如果您正在尋找一種管理不同尺寸圖像的自動解決方案，那就沒有一個。即使** Facebook **使用算法來調整和裁剪用戶上傳的圖像。 –

嘗試，'最大寬度 –

@DeepakYadav我已經設置了寬度。高度是問題。 –

嘗試在圖像上使用最小和最大高度。

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

來源

2017-03-21 11:56:37 Conor

這將保持佈局在一起，但破壞圖像的比例。 –

這應該保持你想要的高度和適當的寬高比。

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一個例子

在容器DIV，和最大寬度的img標籤..

來源

2017-03-21 13:11:27

這看起來很有希望，但我想我會以某種方式去調整大小和裁剪。在這種情況下顯示整個圖像會在其周圍留下空白區域。我只是意識到，頁面可能看起來不錯的唯一方法是如果所有圖像都具有相同的寬度/高度。 –

處理用戶上傳的圖像的最佳方式是什麼？

回答

相關問題