CSSは幅拡大・拡大・縮小を実現

jsで幅適応を実現し、幅が変化するにつれて高さが変化する矩形は、みんながきっとできると信じています.jsは要素の幅を取得して、それから相応の割合の高さを計算して、それから要素に割り当てますが、もしCSSだけで実現する必要があるならば.
htmlコードは以下の通りです.

<div class='container'>
    <div class='dummy'>div>
    <div class='content'>contentdiv>
div>

cssコードは以下の通りです.

.container{
    background-color: silver;
    width:100%;
    position:relative;
    display: inline-block;
}
.dummy{
    margin-top: 100%;
}
.content{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
}

効果http://jsfiddle.net/Doing93/9oLqyqha/
次に、どのように実現されたのかを分析します.まずコンテナcontainerブロックには2つのdivが含まれています.1つはdummyです.これは純粋にスケール効果を実現するために加えられています.もう1つのcontentには私たちが本当に見せたい内容が入っています.実は原理も簡単で、divはブロック要素であることを知っていて、それはデフォルトで1行を占めて、幅はもともと適応しているので、私たちがしなければならないのはその高さを幅によって変えることができます.jsを使用しない前提の下で、前に述べたdummyのブロックによって実現され、dummyはcss属性を1つだけ設定し、margin-top:100%で、みんなが反応したと信じています.容器の幅はすでにそこにあるので、dummyブロックのmargin-topによって全体の高さを幅と同じように支え、容器の幅が変化するとdummyの位置も変化し、容器の高さが変化します.
しかし、外部容器が高度に陥没したという問題がある.高さの陥没「この言葉は誰もが初めて聞いたことではないに違いない.親要素の高さは支えられていますね.正確な原理は少し複雑です.単純には、サブエレメントがドキュメントフローから離れると、親エレメントはサブエレメントの存在を知らないため、高度に陥没すると理解できます.親要素がdisplay:inline-blockまたはoverflow:hiddenに設定されている場合、親要素に自分の内部にどのサブ要素があるかをチェックさせますが、absoluteが位置していたサブ要素が発見され、高さが広がります.
ここでdummyブロックにmargin-top:100%を設定し、適応的にスケール可能な正方形を作り出します.この値を変更するだけで長方形が必要な場合は、4:3の長方形が必要な場合はmargin-top:75%に設定します.
転載先:https://www.cnblogs.com/duying/p/3916978.html