同じ高さの3つの列を作成するにはどうすればいいですか？

Question

I need to create the design like the below. I have images of different size and I want them to be the same size in the layout

Answer 1

のは、あなたの列は次のように設定していると言うことができます：私は、これは正しい方向にあなたをプッシュすることを願っています

/* 
    the .col element needs a height 
    if you need a percentual height, you can use padding-top 
*/ 
.col { 
    height: 300px; 
} 

/* the wrapper that holds the image itself */ 
.img { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

/* 
    – the image is centered with the top and 
    left attribute and set back with transform 

    – one problem here, you cannot mix images with landscape 
    and portrait dimensions, only landscape OR portrait images 

    – this css is set up for landscape images. 
    if you wanna use portrait images you have to 
    set width to 100% and height to auto 
*/ 
.img img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    min-height: 100%; 
    min-width: 100%; 
    width: auto; 
    height: 100%; 
} 

：

<div class="col"> 
    <div class="img"> 
     <img src="img/src" /> 
    </div> 
</div> 
<div class="col"> 
    <div class="img"> 
     <img src="img/src" /> 
    </div> 
</div> 
<div class="col"> 
    <div class="img"> 
     <img src="img/src" /> 
    </div> 
</div> 

、あなたはこのCSSを使用することができます。誰もがこのアプローチで風景、肖像画の両方のためのソリューションを持っている場合、plsは私たちに知らせる:)