だから私はこの投稿を見てきました: CSSを使用してdivの高さを幅に比例してスケーリングできますか? そして、それは私の質問に答えます。必要に応じて、div を比例的にスクラーにすることができます。ただし、これらの div の最小の高さを設定することも必要です。
このフィドルhttp://jsfiddle.net/FBZuB/1/で、達成しようとしていることを設定しました。BLUE div は、BLUE div の幅に基づいて RED div の高さを定義する一般的なラッパーです。ただし、RED div の min-height を変更しようとすると、スケールしたい div に min-height があり、予期しない結果が発生します。
最小高さのポイントまで縮小すると、div はスケーリングを停止し、幅のみが変化すると思います。ただし、最小高さを設定すると、計算全体のある種の基点が設定され、すべてが継続的にスケーリングされるようです。これが理にかなっていることを願っています。
RED div は拡大縮小する必要がありますが、特定の時点で RED div が最小の高さに達すると、高さのスケーリングを停止し、幅のみのスケーリングを停止する必要があります。以前に純粋な JavaScript を使用してこれを達成しましたが、上記の投稿を読んだので、CSS のみのソリューションを取得しようとしています。
これがコードです。今のところ内容は無視して構いません... 私は主に赤いブロックに焦点を当てています。min-height に達するまで、幅/高さを比例的にスケーリングします。その後、高さのスケーリングを停止し、幅のみをスケーリングする必要があります。
HTML
<div style="background: blue; width: 70%;">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
</div>
</div>
CSS
div {
margin: 5%;
float: left;
background: red;
position: relative;
}
#left {
width: 50%;
padding-bottom: 60%;
min-height: 100px;
}
#right {
width: 30%;
padding-bottom: 60%;
min-height: 100px;
}
.content {
position: absolute;
width: 90%;
margin: 5%;
background: green;
top: 0;
left: 0;
height: 90%;
}