私は1つのdiv 500x500持っています。2つのdiv、1つ下のdiv、1つの動的と2番目の残りのスペースを埋める
divの2つのdivを作成する必要があります。トップの1つはコンテンツテキストに基づいて高さが動的でなければなりません。もう1つはスペースの残りを埋める必要があり、アスペクト比を維持しながらそのdivのサイズに基づいて動的な画像を作成する必要があります。誰もそれを達成する方法を知っていますか？私はこれがcssだけでは不可能だと思うので、もしあなたがjavascriptでこの問題を解決するための提案があれば、私は非常に素晴らしいものになるでしょう。
例：
親の高さと幅を固定しておくと、子要素がオーバーフローする原因になると思います。
あなたの期待通りに動作する親の動的な高さと幅を持つJsFiddle Exampleがあります。
.parent{
background-color:yellow;
padding:2em;
width:100%;
display:flex;
flex-direction: column;
}
.child{
height:auto;
}
#child1{
flex:1;
background-color:red;
padding:0.5em;
}
#child2{
flex:1;
background-color:blue;
padding:1em 1.5em;
text-align:center;
}
#child2 img{
margin: 0 auto;
height: 90%;
width: 90%;
}<div class="parent">
<div class="child" id="child1">
sometest sometest sometestsometest sometest sometest
sometest sometest sometestsometest sometest sometest
sometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest sometestsometest sometest sometestsometest sometest sometestsometestsometest sometest
</div>
<div class="child" id="child2">
<img src=""/>
</div>
</div>あなたはこのケースで述べたように、あなたも、静的な高さと幅を持つことができますしかし、あなたはautoに親のoverflowプロパティを設定する必要があります。
解決策を試して、他に必要なことがあれば教えてください。
ありがとう！これは最も近い答えですが、静止画は復元できません。 100％の高さと幅の画像コンテナと、内部に最大高さと最大幅100％の画像を追加しました。 Fiddle： https://jsfiddle.net/7n1Lrkty/ – spike200
このすべては、CSSを通じて完全に可能です。プロパティーはflexで回ります。 flexの正しい使い方のチュートリアル/解説があります。作るためのよう
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
は確かにあなたのイメージの高さは、あなただけのイメージにいくつかの割合の高さを定義する必要があるだろうし、幅が自動的に調整されます親divに対して相対的です。
など。
display: flexを外側の容器に付けます。最初の要素に一定の高さを定義し、2番目の要素にflex: 1を与えます。これにより、2番目の要素が空の領域に成長します。画像はそれに合わせてサイズ変更されます。
これは本当にコメントであり、答えではありません。 –
ありがとうございます。より説明しやすくするために追加されました。クール？ – theblindprophet
$(function(){
$("#inside").width($("#inside").height());
})div{
color: white;
padding: 10px;
text-align: center;
}
div div{
margin: 10px;
}
#outside{
background: rgb(200,200,50);
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
}
#top{
background: rgb(255,0,0);
}
#bottom{
background: rgb(0,100,100);
flex-grow: 1;
display: flex;
justify-content: center;
}
#inside{
background: rgb(0,200,0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outside">
<div id="top">
content here <br>
asdf<br>
asdf<br>
asdf<br>
adsf<br>
</div>
<div id="bottom">
<div id="inside">
</div>
</div>
</div>
これはまともな質問ですが、あなたはすでに働いて、それが間違っていたところを説明していないことを試みたもののいくつかを含めることができます。 – craigts