すみません。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}
としてもいいかもしれないですね。単一の要素で完結しますし。
他の方法や何か改善点等ありましたらコメントや回答をくださいますと幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。