Rozciągnij i skaluj tło CSS

Czy istnieje sposób, aby tło w CSS rozciągało się lub skalowało, aby wypełnić swój pojemnik?

W przypadku nowoczesnych przeglądarek możesz to zrobić za pomocą background-size:

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

cover oznacza rozciąganie obrazu w pionie lub w poziomie, aby nigdy nie był układany w kafelki / powtarzany.

To działałoby w Safari 3 (lub nowszym), Chrome, Opera 10+, Firefox 3.6+ i Internet Explorer 9 (lub nowszy).

Aby działał z niższymi wersjami Internet Explorera, wypróbuj następujące CSS:

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

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

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

Jest to dostępne w nowoczesnych przeglądarkach 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%;
}

i powinieneś skończyć!

Aby przeskalować obraz do „pełnego spadu” i zachować proporcje, możesz to zrobić w zamian:

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

Działa całkiem nieźle! Jeśli jednak zostanie przycięty jeden wymiar, zostanie on przycięty tylko z jednej strony obrazu, a nie równo przycięty z obu stron (i wyśrodkowany). Przetestowałem to w Firefox, Webkit i Internet Explorer 8.

Użyj atrybutu rozmiaru tła w CSS3:

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

EDYCJA: Modernizr obsługuje wykrywanie obsługi rozmiaru tła . Możesz użyć obejścia JavaScript napisanego do działania, jednak potrzebujesz go i ładować dynamicznie, gdy nie ma wsparcia. Pozwoli to zachować kod do utrzymania bez uciekania się do natrętnych hacków CSS w niektórych przeglądarkach.

Osobiście używam skryptu, aby sobie z tym poradzić za pomocą jQuery, jest to adaptacja programu imgsizer . Ponieważ w większości projektów używam teraz% szerokości dla układów płynnych na różnych urządzeniach, istnieje niewielka adaptacja do jednej z pętli (uwzględniając rozmiary, które nie zawsze są w 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;
}

EDYCJA: Możesz być także zainteresowany finalizacją jQuery CSS3 .

Wypróbuj rozmiar artykułu w tle . Jeśli zastosujesz wszystkie poniższe elementy, będzie działać w większości przeglądarek oprócz 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 dostępny w CSS 3 , ale zajmie to 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;
}

Pracuje w:

• Safari 3+
• Chrome Anything +
• 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 innej firmy)

Ponadto możesz wypróbować to rozwiązanie np

    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 autorstwa Chrisa Coyiera http://css-tricks.com/perfect-full-page-background-image/

Jednym słowem: nie. Jedynym sposobem na rozciągnięcie obrazu jest <img>użycie tagu. Musisz być kreatywny.

Tak było kiedyś w 2008 roku, kiedy napisano odpowiedź. Dzisiaj obsługiwane są nowoczesne przeglądarki, background-sizektóre rozwiązują ten problem. Uważaj, że IE8 go nie obsługuje.

Zdefiniuj „rozciągnij i skaluj” ...

Jeśli masz format bitmapy, na ogół nie jest świetne (mówiąc graficznie) rozciąganie go i przeciąganie. Możesz użyć powtarzalnych wzorów, aby uzyskać iluzję tego samego efektu. Na przykład, jeśli masz gradient, który staje się jaśniejszy w kierunku dolnej części strony, wówczas użyłbyś grafiki o szerokości jednego piksela i tej samej wysokości co kontener (lub najlepiej większy, aby uwzględnić skalowanie), a następnie ułóż go na strona. Podobnie, jeśli gradient przebiegałby przez stronę, byłby o jeden piksel wyższy i szerszy niż kontener i powtarzany w dół strony.

Zwykle, aby złudzić jego rozciąganie w celu napełnienia pojemnika, gdy pojemnik rośnie lub kurczy się, obraz staje się 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ś takim, jak pudełko z zakrzywionymi krawędziami, przykleiłbyś lewą stronę pudełka do lewej strony pojemnika z wystarczającym zachodzeniem na siebie (z uzasadnionego powodu) bez względu na to, jak duży jest pojemnik, nigdy kończy się tło, a następnie nakładasz obraz prawej strony pudełka zakrzywionymi krawędziami i umieszczasz go po prawej stronie pojemnika. Tak więc, gdy pojemnik kurczy się lub rośnie, efekt zakrzywionego pudełka wydaje się wraz z nim kurczyć lub rosnąć - w rzeczywistości nie, ale daje iluzję, co się dzieje.

Aby naprawdę zmniejszyć obraz i powiększać się wraz z pojemnikiem, musisz użyć kilku sztuczek warstw, aby obraz wyglądał jak tło, a także javascript, aby zmienić jego rozmiar wraz z pojemnikiem. Obecnie nie ma takiej możliwości w CSS ...

Jeśli używasz grafiki wektorowej, obawiam się, że jesteś daleko poza moim obszarem wiedzy.

Właśnie z tego zrobiłem. W klasie stretch po prostu zmieniłem wysokość na auto. W ten sposób obraz tła ma zawsze 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-attachmentlinię:

#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 zauważyć, że jest to równoważne z robieniem:

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

Innym świetnym rozwiązaniem tego problemu jest Backstretch Srobbina, który można zastosować do ciała 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ą do oszukiwania SolidSmile jest skalowanie (proporcjonalne zmiany rozmiaru) poprzez ustawienie szerokości i użycie auto dla wysokości.

Dawny:

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

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