2012-02-10 3 views
6

divは背景が薄くなります。このdivの高さはその内容に依存します。私は、背景画像のサイズの倍数で伸びるdivが必要です。CSS:divの高さは数字の倍数ですか?

たとえば、背景は64x64画像です。 divの高さを増やす場合は、64pxのステップで行いたいと思います。

は、CSSでこれは可能ですか?私はGoogleを使用してリードを見つけていない。御時間ありがとうございます!

+1

は受け入れ可能ですか? – ANeves

+3

あなたはcssでこれを行うことはできません - 一般的にCSSでは、動的にサイズの変更された要素の内容に応じてスタイルを設定することはできません。 – Oliver

+1

シンプルなCSSでは実現できません。そのためにjQueryを試してみてください。 – NewUser

答えて

6

私の知る限り、これはCSSで行うことはできませんが、おそらくいくつかのjavascriptで解決できます。 jQueryにアクセスできる場合:

$(function() { 
    $div = $('#the_div_id'); 
    var remainder = $div.height() % 64; 
    var newHeight = $div.height() + (64-remainder); 
    $div.css('height', newHeight); 
}); 
+0

jQueryを使わなくてもjavascriptで解決できます。 – Rob

+0

そうですね、ドキュメントが完成した後、私はその方法で下に行くと思います。ありがとう=) – Jem

+0

ようこそ。ところで、 '$(function(){...});'は、あなたがjQueryを初めて使う人のために、「DOMが準備ができたらこれを行う」の略です。そして、@ Robが言ったように、それはネイティブのJavascriptでも実行できます。私は個人的にjQueryを好むだけです。 – Christoffer

0

divの内容は何ですか?それは正しい値にdivのサイズを設定するのと同じように聞こえる、あなたは内容に注意を払う必要がある - this post細かい単純なテクニックは、動作するはずの垂直リズムを実装する(すなわち、64pxの行の高さを使用して)

+0

これは実際にキッチュなのです:divははしごを表し、その高さは比例しますdivの高さからスクリーンの上端までの距離 - ターミネーター要素に接続するのに必要なタイリングを行います。 – Jem

4

特定の場合に応じて、新しいbackground-size CSSプロパティを使用できます。

div.yourDiv { 
    background-image: url('yourImage.jpg'); 
    background-repeat: repeat; 
    background-size: contain; 
} 

その後、何でも切断されることなく、完全にあなたdivの大きさ、あなたのイメージがしますタイル:私は宣言を明確にするために、別個の残してきました。古いブラウザではタイル張りの画像が得られますが、これは問題である場合とそうでない場合があります。

+0

非常に興味深い、今これを試しています! – Jem

関連する問題