当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Image in background to contain it

问题描述:

hey guys without using background-image property, i want the image to contain the whole div, but other elements '1' and '5' are preventing that to happen. How do I do?

 <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>

网友答案:

That behavior is expected for Flexbox. I'd do some reading on Flexbox.

Do this...

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>
网友答案:

because you declare 1 and 5 with specific width and height you can't use the picture to cover the whole frame. you need to use display:absolut so you'll cover even 1 and 5 elements and also need to put width:100% so it'll cover the whole frame. btw I'd suggest to put also height:auto so it'll fit and be responsive also for mobile =]

分享给朋友:
您可能感兴趣的文章:
随机阅读: