画像をバックグラウンドで含んでいる

Question

背景画像のプロパティを使用していない人は、画像にdiv全体が含まれていても構わないが、他の要素 '1'と '5'私はどのように行いますか？

<div id ="trial" style=" 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    height: 150px; 
    align-content: center; 
    border : 4px solid black; 
    " 
    > 
    <div style="background-color: blue; height: 20px;" class="item">1</div> 
    <img style="margin: 0px; padding: 0px; flex-grow: 1; width: 175px; height: 150px; z-index: -1;" id="slideShowImage" src="C:\\Users\\disley\\Desktop\\New folder\\Slideshow\\imag.1.jpg"/> 
    <div style="background-color: blue; height: 20px; width: 20px;" class="item">5</div> 
    </div> 

Answer 1

この動作はFlexboxで想定されています。私はFlexboxでいくつかの読書をしたいと思います。あなたはフレーム全体をカバーするために画像を使用することはできません特定の幅と高さを1と5を宣言するため

は...

http://jsbin.com/migiwojeva/edit?html,output

 <div id ="trial" style=" 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    height: 150px; 
    align-content: center; 
    border : 4px solid black; 
    position:relative; 
    " 
    > 
    <div style="background-color: blue; height: 20px;" class="item">1</div> 
    <img style="position:absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;" id="slideShowImage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbrXPRpe_c7Jl99y4N6oDx_Mn9fAIPGYEsSEROYyADGchjH_qQrdskBBE"/> 
    <div style="background-color: blue; height: 20px; width: 20px;" class="item">5</div> 
    </div> 

Answer 2

にこれを行います。 display：absolutを使う必要があるので、1要素と5要素をカバーし、width：100％を配置する必要がありますので、フレーム全体をカバーします。 btw私はまた高さを置くことを提案したいと思います：それでは、それはモバイルにも適合し、応答性があるでしょう=]