すべてのブラウザで高さの画像を表示

height: 400px;のような特定の数のピクセルを書き込まずに、すべてのブラウザにthis websiteのような画像を表示したいと思います。すべてのブラウザで高さの画像を表示

モバイル

ラップトップ

は、どのように私は自分のCSSを変更する必要がありますか？私に知らせてくれますか？

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%; 
 
}

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

Bootstrap: 3.3.4、HTML5、jQuery: 2.1.3

出典

2016-10-26 yamachan

あなたは "ピクセル単位で特定の高さを設定せずに" と言います。そして、私はあなたにお勧めします - **あなたはjavascriptが有効になっていない**にリンクしているそのサイトを読み込みます。画像は完全な高さを伸ばしません。ブラウザ*とブラウザのサイズ*を問わずに何を求めているかを調べる唯一の方法は、javascriptを使用して画像の高さをピクセル単位で設定することです*。 –

また、デスクトップやハンドヘルドの画像を簡単に（そしてより簡単に）作成し、メディアのクエリに基づいて画像のパスを切り替えることもできます。 –

cssを高さ：100vh;これは目的を解決します。 – Veer

はheight: 100vh;

Qにその要素を設定しbackground-size: cover;
とその要素の背景画像として、あなたの画像を設定しますuick例：https://jsbin.com/dajepaw/1/

*{box-sizing:border-box;margin:0;} 
 
html, body{height:100%;font:14px/1.4 sans-serif;} 
 

 
header { 
 
    position: fixed; 
 
    z-index: 1; 
 
    width: 100%; 
 
    top: 0; 
 
    height: 72px; 
 
    background: #fff; 
 
} 
 

 
article { 
 
    background: #fff; 
 
    height: 50vh; 
 
} article:nth-child(odd) { 
 
    background: #f7f7f7; 
 
} 
 

 
footer { 
 
    background: #444; 
 
    height: 72px; 
 
} 
 

 
/* SPECIAL CLASSES */ 
 
.fullWithBackground { 
 
    height: 100vh; 
 
    background: url(https://i.stack.imgur.com/LCupt.png) 50% fixed; 
 
    background-size: cover; 
 
    color: #fff; 
 
} 
 

 
.centerInner{ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<header>Header</header> 
 

 
<div class="fullWithBackground centerInner"> 
 
    <div>GALLERY</div> 
 
</div> 
 

 
<main> 
 
    <article>Article 1</article> 
 
    <article>Article 2</article> 
 
</main> 
 

 
<footer>Footer</footer>

出典

2016-10-26 03:14:42

身長：100vhはサファリブラウザでは動作しません。サファリであなたのコードをチェックしてください他のブラウザは正常に動作します –

あなたの答え、Rokoありがとうございます。それは有り難いです。私は 'height：100vh;'を使ってみる。私はリンクしたウェブサイトが 'height：100％;幅：100％; '。私もそれらを使用するが、それは動作しません...うーん... – yamachan

@paragparmmarなぜあなたは100vhがサファリの最新バージョンで動作し続けていると言っているか分からない。デスクトップとモバイル。 –

すべてのブラウザで高さの画像を表示

答えて

関連する問題