Rozciąganie i skalowanie tła CSS

Użyj właściwości CSS 3 background-size:

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

Jest to dostępne dla nowoczesnych przeglądarek, od 2012 roku.

Skalowanie obrazu za pomocą CSS nie jest całkiem możliwe, ale podobny efekt można osiągnąć w następujący sposób.

Użyj tego znacznika:

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

Z następującym CSS:

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

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

Aby przeskalować obraz tak, aby był "full bleed" i zachować proporcje obrazu, możesz to zrobić:

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

Użyj atrybutu background-size w CSS3:

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

Edytuj: Modernizr obsługuje wykrywanie obsługi rozmiaru tła. Możesz użyć obejścia JavaScript napisanego do działania, jednak go potrzebujesz i załadować go dynamicznie, gdy nie ma wsparcia. Dzięki temu kod będzie można konserwować bez uciekania się do natrętnych hacków CSS dla niektórych przeglądarek.

Osobiście używam skryptu do radzenia sobie z nim za pomocą jQuery, jest to adaptacja imgsizer . Jak większość projektów używam teraz szerokości % ' s dla płynnych układów na urządzeniach, istnieje niewielka adaptacja do jednej z pętli (biorąc pod uwagę rozmiary, które nie zawsze 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;
}

EDIT: Możesz być również zainteresowany jQuery css3 Finaliz[s]e.

Wypróbuj Artykuł background-size. Jeśli użyjesz wszystkich z poniższych opcji, będzie to działać w większości przeglądarek z wyjątkiem Internet Explorera.

.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%;
} 

Obecnie Nie. Będzie on dostępny w CSS 3 , ale zajmie trochę czasu zanim zostanie zaimplementowany w większości przeglądarek.

.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;
}

Działa w:

• Safari 3 +
• Chrome Whatever+
• IE 9 +
• Opera 10+ (Opera 9.5 obsługuje rozmiar tła, ale nie słowa kluczowe)
Firefox 3.6 + (Firefox 4 obsługuje wersję z prefiksem non-vendor)

Dodatkowo możesz wypróbować rozwiązanie ie

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

Podziękowania dla tego artykułu Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Zdefiniuj "rozciąganie i skalowanie"...

Jeśli masz format bitmapy, generalnie nie jest dobrze (graficznie rzecz biorąc) rozciągać go i ciągnąć. Możesz użyć powtarzalnych wzorów, aby dać iluzję tego samego efektu. Na przykład, jeśli masz gradient, który staje się lżejszy w kierunku dołu strony, użyjesz Grafiki o szerokości jednego piksela i tej samej wysokości co kontener (lub najlepiej większej, aby uwzględnić skalowanie), a następnie umieścisz ją na stronie. Podobnie, jeśli gradient przebiegałby przez stronę, byłby o jeden piksel wysoki i szerszy niż kontener i powtarzany w dół strony.

Zwykle, aby dać złudzenie rozciągania się, aby wypełnić pojemnik, gdy pojemnik rośnie lub kurczy się, robisz obraz większy niż pojemnik. Wszelkie nakładki nie będą wyświetlane poza granicami kontenera.

Jeśli chcesz uzyskać efekt, który opiera się na czymś w rodzaju pudełka z zakrzywionymi krawędziami, wtedy przyklejasz lewą stronę swojego pole po lewej stronie kontenera z wystarczającą ilością nakładania się, że (w granicach rozsądku) bez względu na to, jak duży kontener, nigdy nie zabraknie tła, a następnie warstwa obrazu z prawej strony pudełka z zakrzywionymi krawędziami i umieścić go po prawej stronie kontenera. Tak więc, gdy pojemnik kurczy się lub rośnie, efekt zakrzywionego pudełka wydaje się kurczyć lub rosnąć wraz z nim - w rzeczywistości nie, ale daje złudzenie, że to, co się dzieje.

Co do tego, że obraz się kurczy i rośnie w przypadku kontenera trzeba użyć kilku sztuczek warstwowych, aby obraz działał jako tło, a niektóre javascript, aby zmienić jego rozmiar za pomocą kontenera. Nie ma aktualnego sposobu na zrobienie tego za pomocą CSS...

Jeśli używasz grafiki wektorowej, to obawiam się, że jesteś poza moim zasięgiem.

jednym słowem: nie. Jedynym sposobem na rozciągnięcie obrazu jest tag <img>. Musisz być kreatywny.

To było prawdziwe w 2008 roku, kiedy odpowiedź została napisana. Obecnie nowoczesne przeglądarki wspierają background-size, co rozwiązuje ten problem. Uważaj, że IE8 go nie obsługuje.

Oto, co z tego zrobiłem. W klasie stretch po prostu zmieniłem wysokość na auto. W ten sposób obraz tła zawsze ma taki sam rozmiar jak szerokość ekranu, a wysokość zawsze będzie miała odpowiedni rozmiar.

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

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

Dodaj background-attachment wiersz:

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

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

Chciałbym zaznaczyć, że jest to równoznaczne z robieniem:

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

Kolejnym świetnym rozwiązaniem jest Backstretch Srobbina, który można zastosować do korpusu lub dowolnego elementu na stronie - http://srobbin.com/jquery-plugins/backstretch/

Spróbuj tego

Http://jsfiddle.net/5LZ55/4/

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;
}

Dodatkową wskazówką dla oszustwa SolidSmile jest skalowanie (proporcjonalna zmiana rozmiaru) poprzez ustawienie szerokości i użycie auto dla wysokości.

Ex:

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

Użyj border-image : yourimage właściwość, aby ustawić obraz i przeskalować go do całej granicy ekranu lub okna .