在每个浏览器上显示全高图像
我希望在每个浏览器上显示图片，全高图像，例如this website，而不会像height: 400px;那样编写特定数量的像素。
移动
膝上型
我应该如何改变我的CSS？你能让我知道吗？
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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
1 个答案:
答案 0 :(得分：1)
使用background-size: cover;为该元素设置图像为背景图像
将该元素设置为height: 100vh;
简单示例：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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？