イメージをウィンドウのサイズに合わせて相対的な位置を維持しながら

Question

私のサイトには、ウィンドウのサイズに応じて拡大縮小する画像（like this）が9つ入っているコンテナエレメントが1つあります。画像）を互いに同じ相対位置にとどまらせる。

これまでのところ、画像の高さがコンテナ要素から流出して、ウィンドウに垂直スクロールバーが表示されたり、行の3番目の画像が次の行にプッシュダウンされたりしました。

これは、私が現在で立ち往生していますものです：それはすべてでうまく動作しないウィンドウのサイズを変更するには

https://jsfiddle.net/5xdznc4e/

#img11 { 
    position: relative; 
    width: 30vmin; 
    height: auto; 
} 

#img12 { 
    position: relative; 
    width: 30vmin; 
    height: auto; 
} 

#img13 { 
    position: relative; 
    width: 30vmin; 
    height: auto; 
} 

。

Answer 1

。

<div class="container"> 
    <img id="img11" src="http://placehold.it/200x200"><img id="img12" src="http://placehold.it/200x200"><img id="img13" src="http://placehold.it/200x200"> 
    <br> 
    <img id="img21" src="http://placehold.it/200x200"><img id="img22" src="http://placehold.it/200x200"><img id="img23" src="http://placehold.it/200x200"> 
    <br> 
    <img id="img31" src="http://placehold.it/200x200"><img id="img32" src="http://placehold.it/200x200"><img id="img33" src="http://placehold.it/200x200"> 
    <br> 
</div> 

このフィドルを参照してください：あなたはこのようなhtmlコードを使用する場合は

、あなたは問題が持っていないコードの下https://jsfiddle.net/Lujqcovo/1/

Answer 2

フレックスボックスを使用する必要があります。これはすばらしいcss3機能です。新しいライン、スペースを持っている画像との

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
} 
 
.container img { 
 
    width: 28%; 
 
    padding: 2%; 
 
    
 
}

<div class="container"> 
 
    <img id="img11" src="http://placehold.it/200x200"> 
 
    <img id="img12" src="http://placehold.it/200x200"> 
 
    <img id="img13" src="http://placehold.it/200x200"> 
 
    <img id="img21" src="http://placehold.it/200x200"> 
 
    <img id="img22" src="http://placehold.it/200x200"> 
 
    <img id="img23" src="http://placehold.it/200x200"> 
 
    <img id="img31" src="http://placehold.it/200x200"> 
 
    <img id="img32" src="http://placehold.it/200x200"> 
 
    <img id="img33" src="http://placehold.it/200x200"> 
 
</div>

Answer 3

試して、これは動作するはず

.container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
.container img { 
 
    position: relative; 
 
    width: 32%; 
 
    height: auto; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
@media (max-width: 768px) { 
 
    .container img { 
 
    width: 49%; 
 
    } 
 
}

<div class="container"> 
 
    
 
    <img id="img11" src="http://placehold.it/200x200"> 
 
    <img id="img12" src="http://placehold.it/200x200"> 
 
    <img id="img13" src="http://placehold.it/200x200"> 
 
    
 
    <img id="img21" src="http://placehold.it/200x200"> 
 
    <img id="img22" src="http://placehold.it/200x200"> 
 
    <img id="img23" src="http://placehold.it/200x200"> 
 
    
 
    <img id="img31" src="http://placehold.it/200x200"> 
 
    <img id="img32" src="http://placehold.it/200x200"> 
 
    <img id="img33" src="http://placehold.it/200x200"> 
 
    
 
</div>

Answer 4

これらのBRタグを削除し、以下のクラスとルールを追加します。

HTML

<div class="container wdth"> 
    <img id="img11" src="http://placehold.it/200x200"> 
    <img id="img12" src="http://placehold.it/200x200"> 
    <img id="img13" src="http://placehold.it/200x200"> 
    <img id="img21" src="http://placehold.it/200x200"> 
    <img id="img22" src="http://placehold.it/200x200"> 
    <img id="img23" src="http://placehold.it/200x200"> 
    <img id="img31" src="http://placehold.it/200x200"> 
    <img id="img32" src="http://placehold.it/200x200"> 
    <img id="img33" src="http://placehold.it/200x200"> 
</div> 

CSS

.wdth{ 
    max-width:400px 
}