ユーザーがアップロードした画像を扱う最良の方法は何ですか？

Question

イメージの表示が必要なレイアウトを作成しようとしています。私はちょうどwidth: 100%; height: auto;を使用してそれに対処しようとしましたが、イメージの比率は常にページの外観を台無しにするでしょう。例えば

：

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

私は、彼らが画像を扱う方法を確認するために支払われたテンプレート/ウェブサイトを見てきたし、それらのすべてがページによさそうだ何のサイズによっては固定の高さ、幅を使用します。

私はcol-xs-3のようなブートストラップクラスを使用しています。ユーザーが画像1230x415または415x1230をアップロードしたとします。今、ページに表示するには2つのアプローチがあります：

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