ウィンドウが変更されたときにイメージHTMLの位置を変更します

Question

これはおそらく私がそれを鳴らすよりはるかに簡単です。 が

私はちょうどこのようにそれらを配置します：

<img src="Image.png" width="350" height="208" style="margin: 0px 16px"> 
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px"> 
<img src="Button.png" width="282" height="84" style="margin: 0px 16px"> 
<img src="Button.png" width="282" height="84" style="margin: 0px 16px"> 

それは上の見栄え

は基本的に私は、これはそれがどのように見えるかです ...下のボタンで6個のイメージ、それぞれを持っています典型的なブラウザウィンドウです。しかし、ウィンドウを狭くすると、次のようになります。

どのように画像/ボタンを一覧表示するかはわかります。

しかし、私は窓を狭くすると、それらは次のようになりたい：私は私の非常に基本的なHTMLに何を追加することができます

は関係なく、ウィンドウがどのように広いいいと形式でこれを維持しないように？

理想的には、xグリッドの最大値、1からxグリッドの最初と最後の画像のようになります。

正しい方向へのプッシュは素晴らしいでしょう。

私はStackoverflowでHEREを見ましたが、正方形でしか動作しないため、はるかに複雑です。

私はあなたの助けを楽しみにして：D

UPDATE

https://jsfiddle.net/du6Lu4ge/

は次のようになります。サイズを変更する場合

、次のようになります。

:(

Answer 1

私はこのようなものだろう：

https://jsfiddle.net/du6Lu4ge/3/

が、それはあなたを助けに希望を！私が何をしたか

はdisplay: inline-block

Answer 2

この例でスタイルのdiv .img-wrapperでimageとbuttonがいっぱい応答働いている、あなたは、単にCSSを編集して、ビューポートを追加することができますラップしました。

HTML：

<div class="imageContainer"> 
    <div class="imageBlock"> 
    <!--<img class="image" src="image.png">--> 
    <div class="image"> 
     your image 
    </div> 
    </div> 
    <div class="buttonBlock"> 
    <!--<img class="button" srck="button.png">--> 
    <div class="button"> 
     your button 
    </div> 
    </div> 
</div> 
<div class="imageContainer"> 
    <div class="imageBlock"> 
    <!--<img class="image" src="image.png">--> 
    <div class="image"> 
     your image 
    </div> 
    </div> 
    <div class="buttonBlock"> 
    <!--<img class="button" srck="button.png">--> 
    <div class="button"> 
     your button 
    </div> 
    </div> 
</div> 
<div class="imageContainer"> 
    <div class="imageBlock"> 
    <!--<img class="image" src="image.png">--> 
    <div class="image"> 
     your image 
    </div> 
    </div> 
    <div class="buttonBlock"> 
    <!--<img class="button" srck="button.png">--> 
    <div class="button"> 
     your button 
    </div> 
    </div> 
</div> 
<div class="imageContainer"> 
    <div class="imageBlock"> 
    <!--<img class="image" src="image.png">--> 
    <div class="image"> 
     your image 
    </div> 
    </div> 
    <div class="buttonBlock"> 
    <!--<img class="button" srck="button.png">--> 
    <div class="button"> 
     your button 
    </div> 
    </div> 
</div> 

CSS：

.imageContainer { 
    width: 400px; 
    display: inline-block; 
} 

.imageContainer .imageBlock { 
    display: inline-block;  
} 

.imageContainer .imageBlock .image { 
    display: inline-block; 
    width: 400px; 
    height: 300px; 
    background-color: darkred; 
} 

.imageContainer .buttonBlock { 
    display: inline-block; 
    text-align: center; 
} 

.imageContainer .buttonBlock .button { 
    display: inline-block; 
    width: 300px; 
    margin: 10px 50px; /* simple way to center it */ 
    height: 100px; 
    background-color: cyan; 
} 

はあなたがhttps://jsfiddle.net/q10fbesm/

編集にそれをテストすることができます：あなたは2行グリッドが必要な場合は、単にこのHTML arroundのコンテナを置きます、それをmax-widht: 801pxでスタイルします。