は、固定幅の列で異なるサイズの複数の画像を取り付け、高さを調整

Question

3（またはそれ以上）の画像、（例えばwidth:100%用）固定幅のDIV内の異なるサイズ及びアスペクト比の全検討：

<div class="image-row"> 
    <img src="1.png"> 
    <img src="2.png"> 
    <img src="3.png"> 
</div> 

を

どのようにして、すべての画像の高さが同じで、幅の合計がコンテナの幅を埋めるようにすることができますか（つまり、きれいな画像行はどうやって作るのですか）

height:100%またはオブジェクトフィットで正しく動作するように、フレックスまたはインラインブロックまたはnowrapのさまざまな組み合わせを試しましたが、何も動作していないようです。私は、アスペクト比を緩めたり、画像の一部をカットしたり、高さが等しくないようにします。

"英語の擬似コード"では、プロシージャは簡単に音を出します。それぞれを単位高さに再スケールし、次にアスペクト比を維持しながらグループとして所定の幅に再スケールします。 CSSが不可能な特定のステップはありますか？

Answer 1

私は背景画像として画像を設定すると助けになると思います。こうすることで、同じ幅/高さの欄に異なるサイズの画像を入れて、background-size:coverを使用することができます。画像ごとにアスペクト比が異なる場合、すべての画像を同じ高さにすることはできません。また、各画像のbackground-positionを調整して、画像をdivの中央に配置するか、同じアスペクト比になる前に編集/トリミングを試みてください。それ以外の場合は、妥協する必要があります。

img { 
 
    width: 33%; 
 
    height: 150px; 
 
} 
 

 
.content { 
 
    width: 33%; 
 
    display:inline-block; 
 
    height:150px; 
 
} 
 

 
#left { 
 
    background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg"); 
 
    background-size:cover; 
 
    
 
} 
 

 
#center { 
 
    background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg"); 
 
    background-size:cover; 
 
} 
 

 
#right { 
 
    background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg"); 
 
    background-size:cover; 
 
}

<div class="image-row"> 
 
    <div id = "left" class="content"> 
 
    </div> 
 
    <div id = "center" class="content"> 
 
    </div> 
 
    <div id = "right" class="content"> 
 
    </div> 
 
</div>