2011-11-10 7 views
3

要素をbackground-size:containのように振る舞い/サイズ変更することはできますか?参考までにhere's a pagebackground-size:contain)を試してみてください(ブラウザウィンドウのサイズを変更し、背景画像の表示を確認してみてください)。background-sizeのような大きさ/振る舞いをする要素を作成する:

つまり、幅と高さのいずれかがウィンドウ幅の100%になるように、アスペクト比が制限された要素を作成したいとします(もう一方は比率を保持し、保持するために必要なものになります)スクロールバーのないウィンドウ内に表示される要素全体)?

たとえば、要素の比率を16:9にしたいとします。もし誰かのブラウザウインドウが超ワイドで、それほど背が高くないなら、要素の高さを100%にし、幅を小さくする(要素の比率を16:9に保つために必要なものは何でも)。誰かのブラウザウィンドウが本当に背が高く、幅があまりない場合、幅は100%になり、高さは低くなります(この要素の目標比率を維持するために必要なものはすべてです)。

私はこれを行う唯一の方法はjavascriptであると考えています。これを達成するための魔法のCSSの方法はありますか?

+1

明確にするために、要素を同じ比率(たとえば16:9)でスタイルすることを検討していますが、1つの長さが100%になるようにスケールしますか? – nchpmn

+0

神様遅いです。私が「含む」を意味するとき、私が「カバー」と言ったように見える。しかし、はい、あなたは正しいアイデアを持っています。私は1つの長さを100%にし、もう1つの長さは比率を保持してウィンドウ内の要素全体を保持するために必要なものにします。私の質問を更新させてください。 – steve

答えて

-1

液体テンプレートビューを使用したいと思います。

チェックアウトこの例で、それはあなたのニーズに合った場合

http://www.maxdesign.com.au/articles/liquid/liquid-sample1/

感謝。

+0

応答していただきありがとうございますが、そのレイアウトを見てブラウザウィンドウのサイズを変更すると、サイズ変更時にすべての変更比率(幅と高さの比率)が表示されます。 – steve

関連する問題