2016-11-21 7 views
0

divのアスペクト比を維持できるこのCSSコードが見つかりました。親のアスペクト比に関係なくdivの縦横比を維持する

.container { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    position: absolute; 
} 


.wrapper { 
    width: 100%; 
    /* whatever width you want */ 
    display: inline-block; 
    position: relative; 
    top: 50%; 
    transform: translate(0%, -50%); 
} 
.wrapper:after { 
    padding-top: 56.25%; 
    /* 16:9 ratio */ 
    display: block; 
    content: ''; 
} 
.main { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
/* fill parent */ 
    background-color: deepskyblue; 
    /* let's see it! */ 
    color: white; 
} 

このJSFiddle例を参照してください。私は、親のアスペクト比よりも広い場合であっても、このアスペクト比を維持する(VW又はVHを使用せずに)、CSSのみのソリューションを希望https://jsfiddle.net/1uyo07tg/3/

を質問(この場合、16:9)。

つまり、親(.container)が16:9よりも広く伸びていても、青色のdivが16:9の比率になるようにしたいと思います。

明確化 - 私は、垂直方向と水平方向中心に、一定の割合で、常に滞在DIVの子供を持つように、いくつかのCSSのみのソリューションをしたいと思い、どんなに親のdivのサイズやアスペクト比、およびVWを使用せず、vh。私はこれが(私が持っている)JSコードを必要としていると確信していますが、誰かがCSS専用のきちんとしたトリックを持っているかどうかを見たいと思っていました。

ボトムライン - CSSでのみthisの機能を探していますが、vhまたはvwはありません。

希望があります。 アイデア

事前のおかげで、 Sa'ar

+0

青いコンテナの上と下に2つのdivを使用して、そこに永久に保管してみませんか?あなたが求めているのはアスペクト比のコンセプトです。 – Aslam

+0

は、明確化の質問を更新 – Saariko

+0

あなたが持っているJSソリューションを私たちと共有することができます。物事をより明確にするでしょう。 – Aslam

答えて

0

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 

 
.container{ 
 
    width:100%; 
 
    height:100%; 
 
    background-color:red; 
 
    padding-top:18%; 
 
    padding-bottom:18%; 
 
} 
 

 
.wrapper{ 
 
    width:100%; 
 
    background-color: deepskyblue; 
 
    height:100%; 
 
    
 
}
<div class="container" > 
 
    <div class="wrapper"> 
 
     <div class="main"/> 
 
    </div> 
 
</div>

これはあなたに16与える:常に9の比率を、拡大ウィンドウの上にもそれを確認

+0

ありがとうございますが、それは私のニーズを十分に満たしていません。私は明確化で質問を更新しました – Saariko

0
body,html { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 
.container { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    overflow: hidden; 
}  
.wrapper { 
    width: 100%; 
    max-width: calc(100vh/0.5625); 
    padding-top: 56.25%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: deepskyblue; 
} 

.mainされますネセリでなくても

+0

ありがとうございました。私は私の質問で言及することを忘れました:VHもVWもありません。それがなければまだ可能ですか? – Saariko

+0

申し訳ありませんができません。 VHがなければ、ウィンドウの高さとその幅を比較することはできません。つまり、BODYに常にラッパーボックスが含まれることを確認することは難しいです。 –

+0

background-size:backgroundとbackground-position:50%... –