BlueGriffon HELP - ウィンドウサイズに応じて再調整する行の画像

Question

これは完全に新しいので、明らかであれば裸です。

私はウィンドウサイズに合わせて再調整したい、つまり2つに、次に1つに（常に中央に）、フルスクリーンで3つの画像を連続して表示します。他の画像は垂直方向の下に表示されます。

これは、（削除画像の場所で）

<div class="img_container"> <img id="img2" alt="" src="IMAGE"> 

#im1 { 
display: block; 
top: 250px; 
background-color: white; 
width: 250px; 
height: 250px; 
position: absolute; 
left: 558px; 
} 

はあなたに感謝のようなコードが見えるものです！

Answer 1

ブートストラップを使用してイメージを呼び出すことができます。

<div class="col-sm-12 col-md-6 col-lg-4"> 

</div> 

More info about col-lg/md/sm/xs

Answer 2

私はあなたがフレックスボックスを使用することをお勧めします。

HTML：：

<ul class="flex-container"> 
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li> 
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li> 
<li class="flex-item"><img src="http://placekitten.com/g/200/200"></li> 
</ul> 

CSS：

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

上記のコードは、https://css-tricks.com/snippets/css/a-guide-to-flexboxから取られた例に基づいています

あなたのコードは次のようになります。