如何使用 Jquery/javascript 根据视图端口大小调整图像大小答案

【问题标题】：How do I resize a image according to view Port Size with Jquery/javascript如何使用 Jquery/javascript 根据视图端口大小调整图像大小
【发布时间】：2016-07-13 21:22:56
【问题描述】：

    I have 3 divs

一个是 jumbotron.Second 是另一个有手风琴的 div。第三是固定页脚。我希望它根据屏幕高度获取高度。页脚高度是 75px。2 手风琴高度是 100px。图像是 PNG。

    <--CODE-->

<body>

//这是第一个有 IMAGE 的 div

           <div class="container push-spaces">
                <div class="row">
                    <div class="col-xs-12">
                        <img>
                    </div>
                </div>
            </div>
        </div>

    <--2ND DIV PANELS Accordions-->

        <div class="panel-group" id="accordion">
        <div class="panel panel-default" id="panel1">
            <div class="panel-heading">
                 <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseOne" 
               href="#collapseOne">
              Collapsible Group Item #1
            </a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body"></div>
            </div>
        </div>
        <div class="panel panel-default" id="panel2">
            <div class="panel-heading">
                 <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseTwo" 
               href="#collapseTwo" class="collapsed">
              Collapsible Group Item #2
            </a>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body"></div>
            </div>
        </div>
    </div>

 <--FOOTER-->
    <div class="navbar navbar-default navbar-fixed-bottom visible-xs ">
            <div class="container text-center">
                <p class="navbar-btn btn  btn-success text-center">BLALALLALAL</p>
            </div>
        </div>


</body>

【问题讨论】：

height: 100vh;是CSS中的屏幕高度，不需要JQ
当我给出这个高度时，不固定的手风琴滑下来。页脚是固定的，所以没关系
那么请发一个小提琴；我在您的代码中没有看到任何图像，而且您经常谈论宽度，但重要的是高度。一张图片/小提琴值 1000 个字。
对不起，高度是错字所以页脚和手风琴总共 100px+75px=175px，所以屏幕的剩余高度应该被图像覆盖。 Jsfiddle 有问题

标签： javascript jquery css twitter-bootstrap responsive-design

【解决方案1】：

您可以使用 CSS3 calc，具体取决于您的浏览器支持。

height: calc(100vh - 175px);

【讨论】：