ID:TldS// さんの質問

div要素をcssでアスペクト比固定にしたものを、height100%で画面全体に表示させたいのですが可能でしょうか？
画像ならbodyとhtmlにheight100%を指定してやれば、後は画像自身にheight100%を指定してやることで画像のアスペクト比は保ったまま画面全体に表示されますが、それをdivだけで実現することって可能でしょうか？

みんなの回答 4 件

ID:ASNVFB さんの回答

positon:absolute; top:0;left:0;bottom:0;right:0;にしてbackground-size:containで表示すればいけるんじゃない？

ID:TldS//

回答ありがとうございます。
すいません質問の文章内容が悪かったです。

例として具体的に書くと、縦4横2の比率の色のついたブロックを画面全体（ウィンドウの縦幅全体）に表示させたいのですが、可能でしょうか？画像などは一切つかいません。

html{height:100%}
body{height:100%}

親要素{
width:800px;
height:100%;
}

子要素{
background-color:red;
padding-top:100%;
width:50%;
}

これで一応4:2の色のついたブロックは完成しますが、これを画面全体に表示させたいのですが、これでは子要素にheight100%を使っている訳ではないので画面縦幅全体には表示されませんし、かといってpaddingではなくheightで子要素の高さを指定してしまうとアスペクト比は維持されませんし、他に良い方法はないでしょうか？

単純に4；2のアスペクト比の画像を作ってheight100%で配置すれば済む話なのですが、なるべくCSSのみで解決できれば気持ちがいいなと思いまして質問いたしました。

ID:3jFh8R

width: 0;
padding-right: 50%;
height: 100%;
とかじゃだめかな

ID:XeFJHD さんの回答

vmax使うとか、calc()使うとかすればいけるかもしれないけど、対象ブラウザやOSが限られるかもしれない

ID:x.IEiR

これ

ID:TldS//

vmaxについて調べました。
widthやheightにvh.vwなどの単位を指定できるみたいですね！初めて知りました。

親要素{
width:100vh;
height:100vh;
}

子要素{
width:50%;
height:100%;
background-color:red;
}

これで一応自分がやりたかったことができました！
ただやはり古いブラウザーや4.4以下のAndroidでは対応できてないみたいですね。そこは割り切ろうと思います。

ID:ZvItiT さんの回答

これか？

CSSだけでアスペクト比を固定するテク

http://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

ID:CEI7GS

YouTubeのレスポンシブか

ID:x.IEiR さんの回答

モダンブラウザであれば、cssだけでできる。
レガシーブラウザ含めるなら画像使うかjs使うかどっちがいいかという話。

最終更新日:2016-01-27 (3,964 views)