Bild im Hintergrund, um es zu enthalten

Question

Hey Jungs ohne Hintergrundbild-Eigenschaft, ich möchte, dass das Bild das ganze Div enthalten, aber andere Elemente '1' und '5' verhindern, dass dies geschieht. Wie mache ich?

<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

Dieses Verhalten wird für Flexbox erwartet. Ich würde etwas über Flexbox lesen.

dies tun ...

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

weil Sie erklären 1 und 5 mit bestimmten Breite und Höhe Sie das Bild nicht verwenden können, das ganze Bild zu decken. Sie müssen Display verwenden: Absolut, so dass Sie sogar 1 und 5 Elemente abdecken und auch Breite: 100%, so dass es den gesamten Rahmen abdecken wird. btw würde ich vorschlagen, auch Höhe: auto so passt und reagiert auch für mobile =]