Есть ли способ заставить фон в CSS растягиваться или масштабироваться, чтобы заполнить его контейнер?
Используйте УСБ 3 свойство фона-размер:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
Это доступно для современных браузерах, начиная с 2012 года.
Для современных браузеров, вы можете сделать это с помощью фон-размер
:
body {
background-image: url(bg.jpg);
background-size: cover;
}
"прикрытие" означает растягивание изображения по вертикали или по горизонтали, поэтому он никогда не плитка повторяет.
Что бы работать на сафари 3 (или более поздней версии), Хром, Опера 10+ и выше, Firefox 3.6+, и интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;9 (или позже).
Для того, чтобы работать с более низких версиях интернет&ампер;усилитель; nbsp;Explorer, попробуйте эти CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Масштабирование изображения с помощью 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, и сети&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8.
Используйте фон-размер атрибута в CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
Редактировать: Modernizr поддерживает обнаружение фон-размер поддержки. Вы можете использовать JavaScript решение написано на работу, однако вам это нужно и динамически загрузить его, когда нет поддержки. Это позволит сохранить поддерживаемого кода, не прибегая к навязчивым хаки CSS для определенных браузеров.
Лично я использую скрипт, чтобы справиться с ней с помощью jQuery, его адаптации imgsizer. Как и большинство моделей мне теперь делать использование ширина %'s для жидкости макеты для разных устройств есть небольшая адаптация к одной из петель (с учетом размеров, которые еще'т всегда 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[С]Е.
Попробовать статьи фон-размер. Если вы используете все следующие, он будет работать в большинстве браузеров, за исключением Internet&ампер;усилитель; nbsp;Обозреватель.
.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%;
}
.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;
}
Работает в:
Кроме того, вы можете попробовать это решение, т. е.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Кредит в этой статье Крис Coyier http://css-tricks.com/perfect-full-page-background-image/
В настоящее время нет. Он будет доступен в CSS 3, но пройдет некоторое время, пока он будет реализован в большинстве браузеров.
Одним словом: нет. Единственный способ растянуть изображение - это тег <img>
. Вам придется проявить изобретательность.
Это было верно в 2008 году, когда был написан этот ответ. Сегодня современные браузеры поддерживают background-size
, что решает эту проблему. Имейте в виду, что IE8 его не поддерживает.
Дайте определение понятию "растяжение и масштабирование"...
Если у вас есть растровый формат, то, как правило, не очень удобно (с точки зрения графики) растягивать и масштабировать его. Вы можете использовать повторяющиеся детали, чтобы создать иллюзию одного и того же эффекта. Например, если у вас есть градиент, который становится светлее к низу страницы, то вы можете использовать графику шириной в один пиксель и высотой, равной высоте вашего контейнера (а лучше больше, чтобы учесть масштабирование), а затем расположить ее по всей странице. Аналогичным образом, если градиент проходит через всю страницу, его высота и ширина должна быть на один пиксель больше, чем у контейнера, и повторяться по всей странице.
Обычно, чтобы создать иллюзию растягивания изображения для заполнения контейнера при его увеличении или уменьшении, изображение делают больше контейнера. Любое перекрытие не будет отображаться за границами контейнера.
Если вам нужен эффект, основанный на чем-то вроде коробки с изогнутыми краями, то вы приклеиваете левую сторону коробки к левой стороне контейнера с таким перекрытием, чтобы (в пределах разумного) независимо от размера контейнера фон никогда не заканчивался, а затем накладываете изображение правой стороны коробки с изогнутыми краями и располагаете его справа от контейнера. Таким образом, когда контейнер уменьшается или увеличивается, эффект изогнутой коробки, кажется, уменьшается или увеличивается вместе с ним - на самом деле это не так, но создается иллюзия, что именно это и происходит.
Чтобы действительно заставить изображение уменьшаться и увеличиваться вместе с контейнером, необходимо использовать некоторые трюки с наслоением, чтобы изображение выглядело как фон, и некоторый javascript для изменения его размера вместе с контейнером. В настоящее время не существует способа сделать это с помощью CSS...
Если вы используете векторную графику, боюсь, вы выходите за рамки моей компетенции.
Это то, что я'ве сделал это. В классе стрейч, я просто изменил высоту на авто
. Таким образом, ваш фоновый рисунок всегда получали такого же размера, как ширина экрана и высота будут всегда иметь правильный размер.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Отличным решением для этого является Srobbin'ы Бэкстретч, которые могут быть применены к телу или любому элементу на странице - http://srobbin.com/jquery-plugins/backstretch/
Попробуйте это
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Добавить фон-вложение линия:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Дополнительный совет для SolidSmile'ы, чит для масштабирования (пропорциональное изменение размера) путем установки ширины и, используя авто по высоте.
Экс:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Используйте границы изображения : вашего образ
имущество, чтобы установить ваши изображения и масштабировать его до всей границы вашего экрана или окна .