Растянуть и масштабировать фон CSS

Question

Есть ли способ заставить фон CSS растягивать или масштабировать, чтобы заполнить его контейнер?

Answer 1

Используйте свойство CSS 3 background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Доступно для современных браузеров с 2012 года.

Answer 2

В современных браузерах это можно сделать с помощью background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover означает растяжение изображения по вертикали или по горизонтали, чтобы оно никогда не повторялось / повторялось.

Это будет работать для Safari 3 (или более поздней версии), Chrome, Opera 10+, Firefox 3.6+ и Internet Explorer 9 (или более поздней версии).

Чтобы он работал с более низкими версиями Internet Explorer, попробуйте следующие CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Answer 3

Масштабирование изображения с помощью CSS не совсем возможно, но подобный эффект может быть достигнут, однако, следующим образом.

Используйте эту разметку:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

со следующим CSS:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

и все готово!

Чтобы масштабировать изображение до полного обтекания и сохранить соотношение сторон, вы можете сделать это вместо этого:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Это работает довольно хорошо! Однако, если обрезается одно измерение, оно будет обрезано только на одной стороне изображения, а не будет равномерно обрезано с обеих сторон (и по центру). Я тестировал его в Firefox, Webkit и Internet Explorer 8.

Answer 4

Используйте атрибут background-size в CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

РЕДАКТИРОВАНИЕ: Modernizr поддерживает обнаружение поддержки размера фона . Вы можете использовать обходной путь JavaScript, написанный для работы, однако вам это нужно и загружать его динамически, когда нет поддержки. Это обеспечит поддержку кода, не прибегая к навязчивым хакам CSS для определенных браузеров.

Лично я использую скрипт для работы с ним, используя jQuery, это адаптация imgsizer . Поскольку в большинстве конструкций, которые я сейчас использую, ширина% используется для разметки флюидов на устройствах, есть небольшая адаптация к одному из циклов (учитывая размеры, которые не всегда равны 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e .

Answer 5

Попробуйте статью background-size . Если вы используете все перечисленное ниже, оно будет работать в большинстве браузеров, кроме Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Answer 6

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Работает в:

• Safari 3+
• Хром Что бы +
• IE 9+
• Opera 10+ (Opera 9.5 поддерживает фоновый размер, но не ключевые слова)
• Firefox 3.6+ (Firefox 4 поддерживает версию без префикса поставщика)

Кроме того, вы можете попробовать это для решения ie 1016 *

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Автор статьи: Крис Койер http://css -tricks.com / совершенное полностраничное-фоновое изображение /

Answer 7

В настоящее время нет. Он будет доступен в CSS 3 , но до тех пор, пока он не будет реализован в большинстве браузеров, потребуется некоторое время.

Answer 8

Одним словом: нет. Единственный способ растянуть изображение - с помощью тега <img>. Вы должны быть творческими.

Раньше это было верно в 2008 году, когда был написан ответ. Сегодня современные браузеры поддерживают background-size, что решает эту проблему. Помните, что IE8 не поддерживает это.

Answer 9

Определить "растянуть и масштабировать" ...

Если у вас есть растровый формат, обычно не очень хорошо (графически) растягивать его и вытягивать. Вы можете использовать повторяющиеся шаблоны, чтобы создать иллюзию того же эффекта. Например, если у вас есть градиент, который становится светлее в нижней части страницы, тогда вы будете использовать графику шириной в один пиксель и такой же высоты, что и ваш контейнер (или, предпочтительно, больше, чтобы учесть масштабирование), а затем разместите его поперек стр. Аналогичным образом, если градиент пробегает по странице, он будет на один пиксель в высоту и шире вашего контейнера и будет повторяться по странице.

Обычно, чтобы создать иллюзию растяжения, чтобы заполнить контейнер, когда контейнер растет или сжимается, вы делаете изображение больше, чем контейнер. Любое перекрытие не будет отображаться за пределами контейнера.

Если вам нужен эффект, основанный на чем-то похожем на коробку с изогнутыми краями, то вы бы прикрепили левую сторону коробки к левой стороне контейнера с достаточным перекрытием, чтобы (в пределах разумного) не зависимо от размера контейнера , он никогда не заканчивается фоном, а затем вы накладываете изображение правой стороны рамки с изогнутыми краями и размещаете его справа от контейнера. Таким образом, по мере того, как контейнер сжимается или растет, эффект изогнутой коробки, по-видимому, уменьшается или увеличивается вместе с ним - на самом деле это не так, но он создает иллюзию того, что происходит.

Что касается реального уменьшения и увеличения изображения в контейнере, вам необходимо использовать некоторые приемы наложения слоев, чтобы изображение работало в качестве фона, а также некоторый JavaScript-код для изменения его размера в контейнере. В настоящее время нет способа сделать это с помощью CSS ...

Если вы используете векторную графику, я боюсь, что вы далеко за пределами моего опыта.

Answer 10

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

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}