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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

CSS

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

Q&A

解決済

2回答

2598閲覧

CSSのみでウィンドウいっぱいに表示

foo03

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

CSS

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

0グッド

0クリップ

投稿2015/09/14 13:44

ページ内の要素を縦横の比率(仮に4:3とします)を維持したまま、ウィンドウいっぱいに表示させたいのですが

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6 body { 7 margin: 0; 8 overflow: hidden; 9 } 10 11 .wrapper{ 12 position: relative; 13 width: 100%; 14 } 15 16 .wrapper:after { 17 padding-top: 75%; 18 display: block; 19 content: ""; 20 } 21 22 .wrapper > .content { 23 position: absolute; 24 top: 0; 25 left: 0; 26 bottom: 0; 27 right: 0; 28 background-color: red; 29 } 30</style> 31</head> 32<body> 33<div class="wrapper"> 34 <div class="content">内容</div> 35</div> 36</body> 37</html>

上のようなコードでは、ウィンドウが縦長のときは良いのですが
ウィンドウの縦横比が4:3よりも横長になった場合に内容が見切れてしまいます。

javascriptを使えば簡単な事なのですが、
そういったものをCSS、CSS3のみで実現することは可能でしょうか。
(IEなど古い環境への対応は不要とします)

よろしくお願いします。

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

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

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

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

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

guest

回答2

0

自己解決

すみません。CSS3のMedia Queriesやcalc()、単位vhなど利用することで自己解決いたしました。

スマホ標準ブラウザの対応状況はAndroid4.4以上、iOS 8以上などと微妙なところですが、PCでは
・Firefox 19
・Chrome 20
・Safari 6
・Opera 15
・IE9
・Edge 12
以降のブラウザで使える様なのでひとまず良しとします (普通は素直にjavascript使えばいい話ですし…)

以下に修正後のコードを載せておきます。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6 body { 7 margin: 0; 8 overflow: hidden; 9 } 10 11 .wrapper { 12 position: relative; 13 width: 100%; 14 } 15 16 .wrapper:after { 17 padding-top: 75%; 18 display: block; 19 content: ""; 20 } 21 22 .wrapper > .content { 23 position: absolute; 24 top: 0; 25 bottom: 0; 26 left: 0; 27 right: 0; 28 } 29 30 /* 画面比率が4:3より横長の場合 */ 31 @media all and (min-aspect-ratio: 4/3) { 32 .wrapper { 33 /* 1vh = viewport高さ / 100 */ 34 width: -moz-calc(100vh * 4/3); 35 width: -webkit-calc(100vh * 4/3); 36 width: calc(100vh * 4/3); 37 } 38 } 39</style> 40</head> 41<body> 42 43<div class="wrapper"> 44 <div id="content" class="content">内容</div> 45</div> 46 47<script type="text/javascript"> 48 // 要素背景が単色では見切れているかどうか判別が難しかったので画像を作成 49 window.addEventListener('load', function (e) { 50 var canvas = document.createElement('canvas'); 51 var ctx = canvas.getContext('2d'); 52 var cwidth = canvas.width = 960; 53 var cheight = canvas.height = 720; 54 55 ctx.fillStyle = '#00FF00'; 56 ctx.fillRect(0,0, cwidth,cheight); 57 58 ctx.strokeStyle = '#FF0000'; 59 ctx.strokeRect(0,0, cwidth,cheight); 60 61 ctx.beginPath(); 62 ctx.moveTo(0, 0); 63 ctx.lineTo(cwidth, cheight); 64 ctx.moveTo(cwidth, 0); 65 ctx.lineTo(0, cheight); 66 ctx.stroke(); 67 68 var url = canvas.toDataURL('image/png'); 69 var content = document.getElementById('content'); 70 content.style.backgroundSize = 'contain'; 71 content.style.backgroundImage = 'url(' + url + ')'; 72 }); 73</script> 74</body> 75</html>

また、calc()などをサポートしないブラウザについて無視できるのであれば (FirefoxやChromeの拡張機能など?) .wrapperなしで

css

1.content { 2 width: -moz-calc(100vh * 4/3); 3 width: -webkit-calc(100vh * 4/3); 4 width: calc(100vh * 4/3); 5 height: -moz-calc(100vw * 3/4); 6 height: -webkit-calc(100vw * 3/4); 7 height: calc(100vw * 3/4); 8}

としてもいいかもしれないですね。単一の要素で完結しますし。

他の方法や何か改善点等ありましたらコメントや回答をくださいますと幸いです。

投稿2015/09/14 21:35

foo03

総合スコア7

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

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

0

端的に答えますと、不可能です。(私が知らないだけでしたら申し訳ありません)
画面サイズの何%で表示するとしかCSSはできません。
また、4:3ではない特定画面に対応しようとしても、その特定画面にのみ適切なサイズで表示されてしまうので好ましくありません。

投稿2015/09/14 15:46

kpiyohiko

総合スコア658

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

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

foo03

2015/09/14 21:38

回答ありがとうございます! 今回は自己解決してしまいましたが、またの機会がありましたら回答していただけますと嬉しいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問