CSS3 は、div と browser_html/css_WEB-ITnose の間で高さと幅を同じにする方法をネイティブにサポートしています。-htmlチュートリアル-php.cn

CSS3 は、div と browser_html/css_WEB-ITnose の間で高さと幅を同じにする方法をネイティブにサポートしています。

WBOY

リリース： 2016-06-21 09:00:16

オリジナル

1311 人が閲覧しました

通常、ブラウザと同じ高さと幅の div を設定して全画面に表示し、次に背景画像を設定してハイエンドのレイアウト効果を実現する必要があります。具体的な例については、以下の図のデモを参照してください。

マウスがスクロールすると、画像全体も上にスクロールします。

以前は、このような高さの効果を実現するには、通常、js を使用して現在のブラウザーの高さを取得し、div の高さを動的に設定していました。場合によっては、ブラウザーのサイズ変更イベントを継続的に検出する必要がありました。 div の高さを継続的に調整します。

実際、CSS に付属する vw と vh の 2 つのユニットはブラウザと同じ高さと幅をサポートできるため、js を完全に放棄できます。
デモ効果

HTML コードは次のとおりです:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>全屏图片</title>    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">    <style>        .fullbg {            position: relative;            width: 100vw;            height: 100vh;            background-position: center center;            background-size: cover;            background-repeat: no-repeat;        }        .inner-content {            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            color: #fff;        }    </style></head><body>    <div class="fullbg" style="background-image: url('http://s.dgtle.com/portal/201601/08/180115ol7n5o75zy7hm002.jpg?szhdl=imageview/2/w/1900');">        <div class="inner-content">            <h1>我就是这么屌</h1>        </div>    </div>    <div class="entry-content">        <p>            相信方今不再会有人质疑手机仅仅只是一个纯粹的通讯工具，随着移动社交应用日渐成为生活中不可缺少的工具，手机的照相功能表现甚至成为了衡量一部手机好坏的关键指标。在绝大部分的旗舰级手机新品发布会之中，我们经常可以看到各厂商们在介绍自家旗舰级机型拍照能力之时自吹自捧得无可匹敌，但我们深知在这些顶级水平的旗舰级手机当中，仍然需要使用真正的实力去决一胜负，而这正是本文的主要任务。        </p>        <p>            本文我们选择了四款旗舰机型，当中分别有索尼 Xperia Z5 Premium 、苹果 iPhone 6s Plus、 三星 Galaxy S6 Edge+、谷歌 Nexus 6P。        </p>    </div></body></html>

ログイン後にコピー

CSS コアコードは次のとおりです

.fullbg {    position: relative;    width: 100vw;    height: 100vh;    background-position: center center;    background-size: cover;    background-repeat: no-repeat;}

ログイン後にコピー