Фоновое изображение растягивает ось y только, сохраняйте repeat-x

У меня есть изображение, заданное как фоновое изображение div. Размер DIV изменяется, и внутри их есть изображение, которое является градиентом.

Мне нужно кросс-браузерное решение для того, чтобы изображение соответствовало высоте div только по оси y, сохраняя repeat-x. Динамическое изменение DIV осуществляется с помощью JQuery.

Их может быть вариант с несколькими браузерами с использованием JQuery. Я не против использования сценариев для достижения этого, чтобы получить поддержку кросс-браузера (IE7 +). Я не хочу растягивать изображение, потому что он теряет интенсивность, когда вы растягиваете изображение по оси x, делая полупрозрачное изображение PNG почти прозрачным.

Ответы

Ответ 1

У меня тоже была эта проблема. Это легко в большинстве браузеров, но IE8 и ниже это сложно.

Решение для современных (не IE8 и ниже) браузеров:

#scroller_shadow {
    background: url(../img/ui/shadow.png) center repeat-x;
    background-size: auto 100%;
}

Есть плагины jQuery, которые могут имитировать размер фона для IE8 и ниже, в частности backgroundSize.js, но это не работает, если вы хотите его повторить.

В любом случае, начинается мой ужасный взлом:

<div id="scroller_shadow">
    <div id="scroller_shadow_tile">
        <img src="./img/ui/shadow.png" alt="" >
        <img src="./img/ui/shadow.png" alt="" >
        <img src="./img/ui/shadow.png" alt="" >
        ...
        <img src="./img/ui/shadow.png" alt="" >
    </div>
</div>

Обязательно включите достаточно <img>, чтобы покрыть необходимую область.

CSS

#scroller_shadow {
    width: 500px; /* whatever your width is */
    height: 100px; /* whatever your height is */
    overflow: hidden;
}

#scroller_shadow_tile {
    /* Something sufficiently large, you only to make it unreasonably wide if the width of the parent is dynamic. */
    width: 9999px;
    height: 100%;
}

#scroller_shadow_tile img {
    height: 100%;
    float: left;
    width: auto;
}

В любом случае, идея состоит в том, чтобы создать эффект растяжения из изображений.

JSFiddle.