質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2250閲覧

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

fumi-no

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/09/16 10:06

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

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

![イメージ説明

ただ、
・右側ボックスの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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

H40831

2019/09/16 10:19

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

2019/09/16 10:22 編集

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

回答1

0

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

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

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/09/16 17:00

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

2019/09/16 17:06

なるほど、ちゃんと確認せんとあかんですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問