个人中心
gpt4 book ai didi

css - 在每个浏览器上显示全高图像

转载 作者：行者123 更新时间：2023-11-28 16:00:24 25 4
gpt4 key购买 nike

我想显示一张图片，全高图片，例如 this website在每个浏览器上都无需编写特定数量的像素，如 height: 400px;。

手机

enter image description here

笔记本电脑

enter image description here

我应该如何更改我的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

最佳答案

将您的图像设置为 background-image 为带有 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(/image/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>

关于css - 在每个浏览器上显示全高图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40252919/

25 4 0
文章推荐： javascript - 如何将内部div水平居中于外部div内？
文章推荐： html - 并排和居中对齐 div
文章推荐： swift - 如何让我的文件出现在 Xcode 的项目导航器中？
文章推荐： javascript - javascript中奇怪的变量范围
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com