画面横幅いっぱいにfloatで配置したboxのアスペクト比を保持する

二つのボックスのアスペクト比を保持したい。

下記スクリーンショットのように、二つのボックスを配置してつつ、
画面幅が変化しても左右のボックスのアスペクト比が保持できるようにしたいです。

ただ、
・右側ボックスのheightは100vhで右側ベタつき
・左側と右側のwidthは合計で100%
というのが条件になります。

各コードは下記に
何卒よろしくお願いします。

html

<html lang="ja">
<head>
<title>demo</title>
<link rel="stylesheet" href="demo.css">
<script src="demo.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="c__aspect-box--wrap">
    <div class="c__aspect-box-left">
        <div class="c__aspect-box-left--wrap">
            <p>mv</p>
        </div>
    </div>
    <div class="c__aspect-box-right">
        <div class="c__aspect-box-right--wrap">
            <p>A4</p>
        </div>
    </div>
</div>
</body>
</html>

css


* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
}

.c__aspect-box--wrap {
    width: 100%;
    padding: 0 0;
    box-sizing: border-box;
    overflow: hidden;
}

.c__aspect-box-left {
    float: left;
    background: #ccc;
    width: calc(100% - 70.7vh);
    height: calc(calc(100% - 70.7vh) / 0.7);
}

.c__aspect-box-right {
    float: right;
    width: 70.7vh;
    height: 100vh;
    background: #666;
}

H40831

2019/09/16 10:19

ブラウザの高さを変えず、幅だけ広げた時にどういう状態になることを想定してるんですか？縦横比がくずれないようにしたら高さが100vhじゃなくなるし、高さ100vhを優先したらアスペクト比は崩れるとおもうのですが、私の想像力不足かもしれないので、理想の状態を図かなにかで提出していただけたら助かります。

yoshinavi

2019/09/16 10:22 編集

＞画面幅が変化しても左右のボックスのアスペクト比が保持できるようにしたいです。 →　widthが画面の高さで変わる時点で違うのでは？何故、画面の高さが基準なのでしょうか？ -誤字を修正しました。-

行動規範の内容に同意します

回答1件

下記のようなことですか？

css
1.c__aspect-box-right {
2    float: right;
3    width: 70.7vh;
4    height: 100vh;
5    background: #666;
6}
7.c__aspect-box-left {
8    float: left;
9    background: #ccc;
10    width: calc(100vw - 70.7vh);
11    height: calc((100vw - 70.7vh) * 0.7);
12}

~~calcの入れ子は無理なのでは?~~ calcの入れ子の内側は単なる括弧だそうです。
また、/ 0.7 だと縦長になるので、* 0.7 で横長がご希望かなと?

サンプルページ
画面横幅いっぱいにfloatで配置したboxのアスペクト比を保持する

投稿2019/09/16 16:29

編集2019/09/17 02:56

hatena19

総合スコア34073

kei344

2019/09/16 17:00

> calcの入れ子は無理なのでは? 一応可能です。【calc() - CSS: カスケーディングスタイルシート | MDN】 https://developer.mozilla.org/ja/docs/Web/CSS/calc > calc() 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。