CSS を使用してページ コンテンツのアスペクト比を維持する方法の例

高洛峰
リリース: 2017-03-10 10:47:16
オリジナル
1563 人が閲覧しました

この記事では、CSS を使用してページ コンテンツのアスペクト比を維持する方法について説明します。著者は、疑似要素や vw ユニットなどのさまざまな方法の例を示します。必要な友人はそれを参照してください。

要件の説明: モバイル端末は、ページ全体の半円。 (同様の問題、4x4 の正方形グリッドの実装)
CSS を使用してページ コンテンツのアスペクト比を維持する方法の例

問題を単純化すると、高さと幅の比率が 1:2 のブロックを実装すると理解できます。

解決すべき問題:

1.高さと幅は一定の比率にあります。

2.外容器の高さ、幅が不明。

3. 代わりに画像やスクリプトを使用しないようにしてください。

4.モバイル端末に対応しています。

HTMLの書き方

<p class = "semicircle"></p>
ログイン後にコピー


考え1、高さ: 100%を使用、

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}
ログイン後にコピー


問題があり、高さのパーセンテージは現在のコンテナではなく親コンテナに基づいて計算されます。私たちのニーズにまったく応えられません。効果は次のとおりです:
CSS を使用してページ コンテンツのアスペクト比を維持する方法の例

親コンテナ本体の高さのパーセンテージは、その子コンテナによって埋められる高さに関連します。本体の高さが 100% に設定されている場合でも、実際の高さは子コンテナによって埋められます。つまり、半円は境界線の 5 であり、親コンテナは「すべて展開」することができないため、親コンテナの高さをパーセンテージで設定して、幅と高さの特定の比率を持つコンテナを指定することはできません。

思考 2、padding-top または padding-bottom を 100% に設定します
パーセンテージは、生成されたボックスの包含ブロックの幅に対して計算されます [...] (出典: w3.org、強調は私のものです)

幅のパーセンテージの計算は、生成されたボックスの包含ブロックの幅に関連します。 padding-top と padding-bottom のパーセンテージは、親コンテナの高さではなく幅に基づいて計算されます。その他の比率実装比較表


アスペクト比パディングボトム値
16:956.25%
4:375%
3:2 66.66%
8:562.5%
body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 0;   

    padding-bottom: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}
ログイン後にコピー


3つ考えて、vwユニットを使用してください
要素の高さと幅を設定するにはvwユニットを使用してください。vmのサイズはビューポートを通してです幅が設定されているため、コンテナを一定の比率で表示する場合にこの方法を使用できます。 vw の 1 単位はビューポート幅の 1 パーセントに相当します。つまり、100vw はビューポート幅の 100% に相当します。

すごい


比較表

アスペクト比幅を
1:11
1:3 3
4:3 0.75
16:90.5625



思考4、疑似要素とインラインブロックレイアウトを使用

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
     width: 100vw;   
      height:100vw;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}
ログイン後にコピー


コードは少し複雑ですが、柔軟性があり、より類似した効果を実現できます。

画面の幅の 80% にわたる半円を実装するように要件が変更された場合は、属性 width:80% を .semicircle に追加し、コンテナを中央に配置するだけです。

この方法の原理は非常に明確です:

考え方 1 を参照。外部コンテナの高さを 100% 拡張できない場合は、疑似要素を使用して同じ高さと幅の要素を挿入して拡張できます。コンテナを 1 対 1 の高さにします。半円を実装するこの方法では、実際には幅と高さの比率が 1 対 1 のコンテナが必要になることに注意してください。つまり、上記の方法の 2 倍のスペースが必要になります。

設定:要素境界前、解析原則:
CSS を使用してページ コンテンツのアスペクト比を維持する方法の例

5つ考えて、画像を使用し、ローエンドモバイルデバイスと互換性があります。

body {   
    width: 100%;   
    font-size: 0;   
    text-align: center;   
    background: lightblue;   
}   
.semicircle {   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}   

.semicircle:before {   
    content:"";   
    display: inline-block;   
    padding-bottom: 100%;   
}
ログイン後にコピー


スクリプトを使用すると、CSSがより簡潔かつ明確になり、目標が明確になります。

semicircler img {   
  width: 100%;   
  background-repeat: no-repeat;   
  background-size: 100% 100%;   
  background-image: url(../img/autoresized-picture.jpg);   
}
ログイン後にコピー


2*2 の正方形グリッドの実装用
CSS を使用してページ コンテンツのアスペクト比を維持する方法の例

p.style.height=p.offsetWidth+"px";
ログイン後にコピー



以上がCSS を使用してページ コンテンツのアスペクト比を維持する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!