Question

我知道它被问过一百万次，但搜索结果似乎都不适合我。

我想知道如何使我的图像与显示器的尺寸相同。我知道我必须给图像的父母一个高度和宽度，以便我可以使用高度：100％，但我怎样才能给它的父母一个不同的高度和宽度？

我使用的是位置：绝对但只是将所有其他内容放在我的照片上:(

我也在使用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

身高：100％不适合我的形象

1 个答案: