html - 高度 :100% not working for my image

Question

我知道它被问了一百万次，但似乎没有一个搜索结果适合我。

我想知道如何使我的图像与显示器大小相同。我知道我必须给图像的父级一个高度和宽度，这样我才能使用 Height:100% 但是我如何给它的父级一个高度和宽度，每个设备都不同？

我使用了 position:absolute 但这只是让所有其他内容都位于我的图片之上:(

我也在使用 Bootstrap (如果您需要该信息)

任何帮助都会是老板!谢谢!

一点点我的标记

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" >

**this img below to be the size of users display**

<div style="background-color:#efefef; background-image: url(/App_Themes/Biz/Images/home-main.jpg); position: static; height:100%; width:100%; background-position:center bottom; background-repeat:no-repeat; background-size:cover;">
    <div class="container" style="height:1200px;">

        <div class="jumbotron" style="color:#fff; background-color:transparent; text-align:center;">
            <h2 style="font-weight:bold!important;">FREE rents</h2>
            <p>The easy way to rent out stuff</p>
            <p><a class="btn btn-default" role="button" href="#moreInfoPanel" id="findOutMore">FIND OUT MORE</a> <a class="btn btn-primary" href="/Account/Add-Property" role="button">rent it now</a></p>
        </div>

    </div>
</div>

<div style="background-color:#eff5f7; border-top:solid 1px #e6e9ea; border-bottom:solid 1px #e6e9ea;">
    <div class="container">
        <img src="App_Themes/biz/Images/sign.png" alt=" Portals" style="padding:5% 0%; width:100%;" />
    </div>
</div>

<div>

    <div class="container" id="moreInfoPanel">

        <div class="row">

                    <div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
                        <div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
                        <img src="App_Themes/biz/Images/free.png" style="margin-top:-55px;" alt="Lets Rent - FREE"  />
                        <h4>Free</h4>  

                        <p>
                            some stuff
                        </p>

                        <a href="Pricing" title="Read More - Pricing" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
                        <div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
                        <img src="App_Themes/biz/Images/quick.png" id="quickImage" runat="server" style="margin-top:-55px;" alt="QUICK"  />
                        <h4>Quick</h4>  

                        <p>
                           more crap
                        </p>

                        <a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
                        <div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
                        <img src="App_Themes/biz/Images/easy.png" style="margin-top:-55px;" alt="EASY"  />
                        <h4>Easy</h4>  

                        <p>
                            boom stuff here!
                        </p>

                        <a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
                        </div>
                    </div>

        </div>

    </div>

Answer 1

一个简单快捷的方法是使用 vh-units。在 http://caniuse.com/#feat=viewport-units 中检查您是否有适当的浏览器支持

CSS:

.full-img{
    height:100vh; /* This means 100 percent of viewport height */
    background:red;
}

html:

Above the full height block
<div class="full-img">
    <p>This takes 100% of viewport height = 100vh</p>
    <p>check http://caniuse.com/#feat=viewport-units for browser support</p>
</div>
Below the full height block