Question

I m working with a div that has a pattern-image as background. The pattern is repeatable but is preferred to expand with an interval of pixels.

我愿知道,是否有办法扩大四舍五入,但随着案文的补足,这一办法仍在扩大。

Say the pattern is best viewed with the interval of 10px, eg. height:120px, 130px, 140px etc. A div is present with dynamic content and as the height of the div expands the height is fixed to the next possible height within the interval. Eg. the original height of the div is 132px, which should be transformed into 140px automatically.

Is this possible? I ve added the jquery tag since I assume this is not possible with CSS alone and javascript/jquery is my guess for a solution :)

我合并了两个现有答案的解决办法:

$(function(){
    var DivSize = function(el) {
        $(el).css( height ,Math.ceil( $(el).height() / 10 ) * 10+ px );
    }
    DivSize("#test");
});

这似乎就是做的!

Answer 1

现有解决办法的问题在于,这些解决办法没有考虑到,你会重新在四分五裂时形成固定的高度,而不管内容是什么。因此,你需要一个要素告诉你,内容高度是,然后总结要素具有背景,并根据内层内容的高度变化加以扩大。

This jsFiddle example should speak for itself, the interval is ofcourse for testing / demo as is the css. http://jsfiddle.net/sg3s/uHsVg/

The example JS:

setInterval(function() {
    var $inner = $( #innerContent ),
        $outer = $( #outerDiv );

    // Change the contents.... 
    $inner.text($inner.text() +   lorem ipsum dolor sit amet );

    // Height changed over treshhold? treshhold = outerheight
    if ($outer.height() <= $inner.height()) {
        $outer.height(Math.ceil($inner.height() / 10) * 10);
    }

}, 250);

例:

<div id="outerDiv">
    <div id="innerContent">Test</div>
</div>

这种扩大的四舍五入并不一定是绝对的,或是任何东西,它像任何常规的html阻塞部分一样,固定的高度。

<>strong>Edit:如果发言,也使它缩小,仅仅消除了僵局,我只是说,只有这样,它才能真正改变,而不仅仅是any。改变

Answer 2

介绍本中心:

background-size: cover;

Answer 3

如果该元素已穿过或边界(如果已经,你需要对这些要素进行说明),并且已经进行过检测,那么这项工作就没有了。

jQuery( document ).ready(
    function(){
    var div = jQuery("#pattern-div"), curHeight = div.height();

    div.css( "height", Math.ceil( curHeight / 10 ) * 10 );

        window.setInterval(
            function(){

            var newHeight = div.height(), roundedHeight;

                if( newHeight !== curHeight ) {
                roundedHeight = Math.ceil( newHeight / 10 ) * 10;
                curHeight = roundedHeight;
                div.css( "height", roundedHeight );
                }

            },
        200 );
    }
);

It keeps checking if the automatic height has changed, ceils it up to nearest 10 and sets it as the height.

Answer 4

Ahh, I see, so you always want your div size to be a multiple of 10.

当内容得到更新时,你应发射或称呼一项功能,然后将四级高射到下一个最大多级,例如:

function DivSize(el) { 
    $(el).css( height ,$(el).height()+(10-$(el).height()%10)+ px );
}

你的四位将担任以下职务:绝对;或:相对;高度至工作。

友情链接