画像の幅と高さが一致するように画像を配置

Question

こんにちは私はこの画像に沿って画像を配置しようとしていますが、同じには見えません。誰も私にチップをお願いできますか？ This is how it should look

And this is how my version looks

これは、あなたが3つの列にサイトを分割することができます私のコード

<img src="img3.png" alt="img3" width="30%" height="364px"> 

<img src="img2.png" alt="img2" width="30%" height="590px"> 

<img src="img3.png" alt="img3" width="30%" height="364px"> 

<img src="img2.png" alt="img2" width="30%" height="590px"> 

<img src="img3.png" alt="img3" width="30%" height="364px"> 

<img src="img2.png" alt="img2" width="30%" height="590px"> 

Answer 1

です。あなたがofcourseの個別列ごとにCSSを作ることができます

<div class="columns"> 
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px"> 

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px"> 
</div> 

<div class="columns"> 
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px"> 

<img class="imgcolumntall"src="img2.png" alt="img2" width="30%" height="590px"> 
</div> 

<div class="columns"> 
<img class="imgcolumnsmall" src="img3.png" alt="img3" width="30%" height="364px"> 

<img class="imgcolumntall" src="img2.png" alt="img2" width="30%" height="590px"> 
</div> 

：

列1は、同じ一つの小さな一枚の背の高い画像が列2、列3

のために行く、それはこのようなものでなければなりません含まれていCSSについて'column1'など

それらを呼び出すことは非常に簡単です：

.columns { 
float:left; 
overflow: hidden; 
background-color: #ff00ff; 
} 

img.imgcolumntall { 
display: inline; 
width: 30%; 
height: 590px; 
} 

img.imgcolumnsmall { 
display: inline; 
width: 30%; 
height: 364px; 
}