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

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

Определите "фрагмент и масштаб"...

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

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

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

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

при использовании векторной графики Вы - путь вне моей области экспертных знаний, я боюсь.

Одним словом: нет. Единственный способ расширить изображение с эти <img> тег. Необходимо будет быть творческими.

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

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

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

An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.

Ex:

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

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

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

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

Добавьте строку вложения фона :

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

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