cssのみでスクリーンresizeを行う場合は、要素の幅を高くします.

1772 ワード

背景画像のアスペクト比
2つのケース:

あなたの望むピクチャーは最も広くて固定して、もし最も広くて300 pxならば、スクリーンは更に大きくて、ピクチャーの幅も300 pxで、それでは私达がしなければならないのはスクリーンの幅が300より小さい时、幅の比を维持します:


    

div p {
    width:600px;
    padding-top: 35%;
    background:url('./images/ulike.png') no-repeat;
    background-size:contain;
}

幅が固定されている場合、background-sizeはcontainのみです!

スクリーンの大きさは、画像が変化しなければならないので、幅がパーセントだと思います.


    

div p {
    width:30%;
    padding-top: 35%;
    background:url('./images/ulike.png') no-repeat;
    background-size:cover;
}

幅が固定されている場合、background-sizeはcontainでもcoverでも構いません!デフォルトの水平ドキュメントのフローを下にすると、cssのmarginおよびpaddingプロパティの垂直方向のパーセントは、親要素の幅に対して計算され、top、bottomとは異なります.
div { padding: 50%; } または、
div { padding: 100% 0 0; } または、
div { padding-bottom: 100%; } この要素サイズは、親コンテナの幅にかかわらず、幅1:1の正方形であり、この要素は常に比例を維持します.
画像の幅100%、高さ適応があまりよくありません.しかし、この過程でレイアウトはずっと再描画されており、望ましくありません.
divアスペクト比




.parent {
width: 50%;
padding: 20% 0 0;
position: relative;
background: darkseagreen;
}
div div {
position: absolute;
width: 100%;
height: 100%;
background: pink;
}

parentはpaddingtopを設定し、サブエレメントの高さをいくらにしたいか、padding-topの値はサブエレメントの高さに等しい.(パーセンテージにのみ適用)

jquery.animate.jsはAnimateを呼び出す.css強力なcss 3アニメーションを実現

FLEXグリッドレイアウトおよびレスポンス処理