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


653

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

Ответы:


267

Для современных браузеров вы можете сделать это, используя 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')";

2
Клемент: То, что вы предлагаете для фильтров для предыдущих IE, работает только частично. Она хорошо масштабирует ширину изображения, но масштабирование по высоте идет неправильно, не ограничивая его ничем. Чем выше страница, тем выше фоновая картинка .. = (Я пробовал это на IE8. А также, возможно ли в любом случае использовать эти команды 'cover' и каким-то образом сделать это совместимым с мобильными телефонами, такими как iphone? Я знаю, что есть область просмотра проблема, но может ли быть возможность масштабировать область просмотра на весь экран таким образом, чтобы фон масштабировался здесь? Спасибо за ответы!

3
Специфичные для IE фильтры не являются идеальными решениями, поэтому не стесняйтесь использовать IE с альтернативами CSS. Я лично использую «обложку» CSS3 на своем собственном сайте, и она прекрасно работает на устройствах iOS, просто обязательно определите ширину устройства.
Клемент

9
Крышка не растягивается. 100% 100% да.
neoswf

Эти решения работали лучше всего для меня, когда я не хотел растягивать изображение ни по горизонтали, ни по вертикали больше, чем его фактическое разрешение. Спасибо..!!
Мистер Нодди,

1
NB: Начиная с Chromium 78.0.3904.97, невозможно масштабировать изображения SVG независимо вдоль каждой оси. Возможно, вам придется увеличить его и преобразовать в растровое изображение.
Майк

567

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

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

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


93
Чтобы сохранить соотношение сторон изображения, вы должны использовать "background-size: cover;" или "фоновый размер: содержать;" Я создал полифилл, который реализует эти значения в IE8: github.com/louisremi/background-size-polyfill
Луи-Реми,

6
Я знаю, что это год, но я должен (смеется и) согласиться с частью «достойных браузеров». Проверьте все ваши браузеры, но у меня было больше проблем с IE, чем с любым из них.
ErocM

36
Я должен был установить background-size: 100% 100%;желаемый эффект, на который рассчитывал, если это кому-то еще поможет.
Гуаном

1
объяснение coverи contain на MDN
мохас

2
это на самом деле не работает. Вопрос в том, чтобы заполнить контейнер, что означает, что мы хотим растянуть его, чтобы он не повторялся. Этот ответ, с другой стороны, будет повторяться в направлении высоты, если высота не покрывает область. «Растянуть, чтобы заполнить» означает растянуть, однако вы должны, чтобы он не повторялся. Правильный ответ - «крышка» снизу. Это на самом деле обрабатывает случай, когда это не так.
мужчина

171

Масштабирование изображения с помощью 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.


2
Это хорошо работает ... но искал что-то более надежное (возможно, с помощью javascript), которое также центрировало бы его и корректировало в зависимости от того, было ли изображение пейзажным или портретным. Если у кого-то есть решение в том же духе, то вам понравится ссылка ... спасибо!
Брайан Армстронг

4
В случае, если кому-то еще это интересно, это, похоже, работает хорошо: buildinternet.com/project/supersized
Брайан Армстронг,

1
Горизонтальная центровка может быть сделано с margin: 0 autoна .stretch. Только установив widthили height, соотношение сторон остается неизменным. Попробуйте использовать max-widthи max-heightограничить коэффициент масштабирования ...
Рональд

1
Это не работает для меня в ie8 / ie9, но работает в ie6 / ie7 (и, конечно, во всех других браузерах). В ie8 / ie9 изображение отображается только примерно на 3/4 деления. У кого-нибудь есть такая же проблема?

3
Недостаток в SO: нет способа помечать ответы, которые больше не верны, что приводит к тому, что такие люди, как @Ullas, сбиваются с пути. Легко масштабировать фоны во всех современных браузерах. developer.mozilla.org/en/CSS/background-size
Гленн Мейнард,

161

Используйте атрибут 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;
}

РЕДАКТИРОВАТЬ: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz [s] e .


3
Просто чтобы подчеркнуть, Modernizr НЕ включает поддержку фонового размера в браузерах, которые изначально не поддерживают его. Он просто имеет удобный кросс-браузерный тест для него. Вы должны подделать его, когда тест вернет false.
Крис Москини

34

Попробуйте статью 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%;
} 

1
Спасибо! Это отличается от "background-size: cover"
Павел Власов

1
это растянуло меня на Ipad, но не масштабируется. спасибо за размещение.
Дон Кот

1
Это отлично подходит для уменьшения фона. Спасибо!
Beingalex

1
Если фоновое изображение является SVG, его также необходимо указать preserveAspectRatio="none"в SVG. Подробнее об этом здесь . Демо здесь .
Менталист

Вы можете использовать background-size: cover; background-attachment: исправлено; Вы можете масштабировать его
Сирадж Ахмед

15

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


2
Отличная статья доступна в A List Apart: Увеличьте размер этого фона, пожалуйста!
jensgram

3
-1 Я не думаю, что этот ответ очень актуален ... и он не предлагает никакого решения .
Potherca

1
@Potherca этот ответ был правильным в то время (почти 3 года назад).
Эран Гальперин

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

3
Нет, я выбрал этот вариант, так как все, что он делает, это говорит: «Компьютер говорит нет», хотя есть несколько решений этой проблемы даже в 2008 году ;-)
Potherca

15
.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 поддерживает версию с префиксом не от поставщика)

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

    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/perfect-full-page-background-image/


Как это лучше или отличается от просто "background-size: cover"?
PKHunter

@PKHunter, я не совсем уверен, к чему вы обращаетесь. Используется background-size: coverтолько с префиксами браузера и решением IE
Blowsie

8

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

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


6
@Blowie - Милый. Проверьте дату ответа. За последние 5 лет ландшафт браузера немного изменился.
Vilx-

5

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

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

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

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

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

Боюсь, если вы используете векторную графику, вы выходите за рамки моего опыта.


Растянуть = изменить размеры x и y независимо, изменяя пропорции изображения, Scale = изменить размеры x и y пропорционально, сохраняя пропорции изображения.
Лоуренс Дол

@SoftwareMonkey: Как фон, то нет, вы не можете изменить растяжение и масштаб в истинном смысле терминов в прямом CSS. Вы должны использовать различные приемы CSS, чтобы создать иллюзию, что это то, что происходит, как я описал.
BenAlabaster

4

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

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

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

2

Добавьте background-attachmentстроку:

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

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

2

Я хотел бы отметить, что это эквивалентно выполнению:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

2

Другим отличным решением для этого является Backstretch Srobbin, который можно применить к телу или любому элементу на странице - http://srobbin.com/jquery-plugins/backstretch/


Ник, мы обычно просим, ​​чтобы вы указали существенные части в своем ответе и предоставили внешнюю ссылку только для более подробной информации - это помогает ответам оставаться полезными в случае разрыва ссылок.
Лоуренс Дол

1
Моя вина. Вообще говоря, вы добавляете backstretch к <head> вашего документа и затем инициализируете так: $ (". Your-element"). Backstretch ("path / to / image.jpg");
Nickff


1

Дополнительным советом для читера SolidSmile является масштабирование (пропорциональное изменение размера) путем установки ширины и использования авто для высоты.

Пример:

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

0

Используйте border-image : yourimageсвойство, чтобы установить ваше изображение и масштабировать его до всей границы вашего экрана или окна.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.