

質問させてください。  
[このサイト](http://htmlcoder.me/preview/the_project/v.1.3/template/index.html)のようにブラウザのサイズがどんな高さであっても（スマホなども含みます）、ほぼ縦幅いっぱいに画像を表示したいと思います。

[![画像の説明をここに入力](https://i.stack.imgur.com/BnL7V.png)](https://i.stack.imgur.com/BnL7V.png)

しかし[自分のページ](https://bananaman.herokuapp.com/header/)では、スマホでの表示時に横幅に依存してしまって縦の長さが短くなってしまいます。

[![画像の説明をここに入力](https://i.stack.imgur.com/DuDr1.png)](https://i.stack.imgur.com/DuDr1.png)

どのようにCSSを書けばよいのか教えて頂けませんでしょうか？  
宜しくお願い致します。

[code]

    html {
        font-size: 62.5% !important;    /* 10 px */
    }
    
    /*header {
        position: absolute;
        text-align: center;
        top: 0px;
        z-index: 1000;
        color: #fff;
        width: 100%;
        height: 64px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }*/
    
    /*img {
        display: block;
        max-width: 100%;
        height: auto;
    }*/
    
    .carousel-control.left, .carousel-control.right {
        background: none !important;
        filter: progid: none !important;
        outline: 0;
    }
    .carousel .carousel-control {
        visibility: hidden;
    }
    .carousel:hover .carousel-control {
        visibility: visible;
    }
    .carousel-indicators {
        bottom:-50px;
    }
    .carousel-inner {
        margin-bottom:50px;
    }
    
    /*.logo {
        float: left;
        text-align: left;
        display: inline-block;
    }*/
    
    .transparent-header {
        z-index: 22;
        position: absolute;
        width: 100%;
        left: 0;
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }
    
    #carousel-example-generic {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .nav::after,
    .nav::before,
    .navbar-header::after,
    .navbar::after {
        display: table-caption;
    }
    
    .nav.navbar-nav li,
    .nav.navbar-nav li a {
        display: inline-block;
    }
    
    #gnav {
        font-size: 0.9em;
        width: 100% !important;
    }
    
    #gnav
        /*#gnav_nav*/ {
            text-align: center;
        }
    
    #logo 
        img {
            display: block;
            margin: auto;
        }
    
    #intro {
        position: relative;
        overflow: hidden;
    }
    
    #bg-image3 {
        background: url("http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg");
    }
    
    .bg-image {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en-EN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- for IE --> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> 
      <title>{% block title %}{% endblock %}</title>
      <meta name=”robots” content=”noindex,nofollow,noarchive,noodp,noydir”>
    <!--  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> -->
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
      <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
      {% block additional_css %}{% endblock %}
      {% block custom_css %}{% endblock %}
    </head>
    <body>
    
    <div id="wrapper">
    
        <!-- <div class="container" id="range">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3" style="background-color:Yellow;">ExtraSmall</div>
                <div class="hidden-xs col-sm-6 col-md-4 col-lg-3" style="background-color:green;">Small</div>
                <div class="hidden-xs hidden-sm col-md-4 col-lg-3" style="background-color:blue;">Midium</div>
                <div class="hidden-xs hidden-sm hidden-md col-lg-3" style="background-color:Red;">Large</div>
            </div>
        </div> -->
    
        <!-- Header -->
        <header id="header" class="header clearfix fixed transparent-header" >
            <div class="container-fluid" id="header-inner">
                <div class="row">
    
                    <!-- Global Navigation -->
                    <div id="gnav" class="" data-spy="affix" data-offset-top="94">
                        <nav class="navbar navbar-inverse" id="gnav_nav">
                                <ul class="nav navbar-nav" id="gnav_ul">
                                    <li class="dropdown">
                                        <a class="" data-toggle="dropdown" href="index.html">商品紹介</a>
                                        <!-- Dropdown -->
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="" href='#'>ジュース <i class=""></i></a>
                                                <ul class="sub-dropdown">
                                                    <li><a href="#">オレンジ</a></li>
                                                    <li><a href="#">アップル</a></li>
                                                    <li><a href="#">グレープ</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a class="" href='#'>寿司 <i class=""></i></a>
                                                <ul class="sub-dropdown">
                                                    <li><a href="#">マグロ</a></li>
                                                    <li><a href="#">サーモン</a></li>
                                                    <li><a href="#">エンガワ</a></li>
                                                </ul>
                                            </li>
                                        </ul>    <!-- dropdown-menu -->
                                    </li>    <!-- .dropdown -->
    
                                    <li class="dropdown">
                                        <a class="" data-toggle="dropdown" href="index.html">ご注文</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="" href='#'>スマートフォン <i class=""></i></a>
                                                <ul class="sub-dropdown">
                                                    <li><a href="#">iPhone</a></li>
                                                    <li><a href="#">Xperia</a></li>
                                                    <li><a href="#">Galaxy</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a class="" href='#'>野菜 <i class=""></i></a>
                                                <ul class="sub-dropdown">
                                                    <li><a href="#">トマト</a></li>
                                                    <li><a href="#">レタス</a></li>
                                                    <li><a href="#">枝豆</a></li>
                                                </ul>
                                            </li>
                                        </ul>    <!-- dropdown-menu -->
                                    </li>    <!-- .dropdown -->
    
                                    <li class="dropdown">
                                        <a class="" data-toggle="dropdown" href="index.html">お問い合わせ</a> 
                                        <ul class="dropdown-menu">
                                            <li><a class="" href='#'>自分用</a></li>
                                            <li><a class="" href='#'>他人用</a></li>
                                        </ul>    <!-- dropdown-menu -->
                                    </li>    <!-- .dropdown -->
    
                                    <li class="dropdown">
                                        <a class="" data-toggle="dropdown" href="index.html">会社案内</a>
                                        <ul class="dropdown-menu">
                                            <li><a class="" href='#'>フォーム</a></li>
                                            <li><a class="" href='#'>電話</a></li>
                                        </ul>    <!-- dropdown-menu -->
                                    </li>    <!-- dropdown -->
    
                                </ul>    <!-- .nav .navbar-nav -->
    
                        </nav>    <!-- .navbar .navbar-default    -->
                    </div>    <!-- #gnav .col-md-9 -->
    
                    <!-- Logo -->
                    <div id="logo" class="">
                        <a href="#">
                            <img src="http://vignette2.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/20120422044236" id="logo-img" class="img-responsive logo-img" height="50" width="50">
                        </a>
                    </div>    <!-- #logo .col-sm-3 -->
    
                </div>    <!-- .row -->
            </div>    <!-- .container -->
        </header>    <!-- #header .clearfix -->
    
    
        <section id="intro">
            <article id="apple">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-1.jpg" alt="First slide">
                            </div>
                            <div class="item">
                                <img class="melon img-responsive" src="http://htmlcoder.me/preview/the_project/v.1.3/template/images/slider-fullscreen-slide-2.jpg" alt="Second slide">
                            </div>
                            <div class="item" id="bg-image3">
                                <div class="bg-image" id="bg-image3">
                                    <h2 class="" id="">This is the headline</h2>
                                    <p class="" id="">This is a pen. This is an apple. U~n, apple pen.</p>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <span class="icon-prev" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <span class="icon-next" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div>
                        <span>Bootstrap carousel</span>
                    </div>
            </article>
        </section>
    
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
        <h1><span>I LOVE TOMATO!!!!</span></h1><br>
    
    
    
    </div>    <!-- #wrapper -->
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>
      </html>
[/code]


CC BY-SA 3.0
2016-10-26T13:24:09.283
29923
2016-10-28T04:41:30.793
18525
question
css bootstrap
ブラウザのサイズに依らずに画像を縦いっぱいに表示するには


縦にあわせるだけならここですが縦長になります。

[code]

    #carousel-example-generic > .carousel-inner > .item > img { height: 100vh; }
    
[/code]

縦長の原因は外部から読み込んでいる`bootstrap.min.css`の下記に`max-width:100%`があるためです。

[code]

    .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
[/code]

まずはこのCSSをローカルに落として編集するか、このCSSより後に読み込んでいるスタイルで上書きするかかと思います。

また、正確にどのように表示したいのか分からないのでCSSのみの実現を自分なりに考えると  
親要素から`overflow:hidden`などで見切れさせセンタリングさせるなどが思い浮かびます。  
ただ親のサイズを超える要素のセンタリングはWidthを取得しないと出来ないのでJavaScriptを使う必要があるかと思います。

[code]

    /** 試験してないので推測です。 **/
    /** 強制的に上書きしていく(important) **/
    .carousel-inner>.item{
        max-width:100%;                 /** 子孫に影響されないよう念のため横は100%越えないようにする **/
        width:100%;                     /** 見切れるのは横だけなので横サイズ指定 **/
        overflow:hidden;                /** サイズを超えたら見切れさせる **/
    }
    .carousel-inner>.item>img{
        max-width: initial!important;   /** 初期状態にする **/
        width: auto!important;          /** 横自由サイズ **/
        height: 100vh!important;        /** 縦画面サイズ **/
    }
    
[/code]


CC BY-SA 3.0
2016-10-28T04:41:30.793
29960
2016-10-28T04:41:30.793
29923
answer