Rozciągnij i skaluj tło CSS


653

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

Odpowiedzi:


267

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')";

2
Do Clementa: Co sugerujesz dla filtrów dla poprzednich IE: s działają tylko częściowo. Dobrze skaluje szerokość obrazu, ale skalowanie wysokości nie działa, nie ograniczając go do niczego. Im wyższa strona, tym jest obraz tła .. = (Próbowałem tego na IE8. A także, czy w każdym razie można by użyć tych komend „cover” i w jakiś sposób uczynić to kompatybilnym z telefonami komórkowymi takimi jak iPhone? Wiem, że jest to rzutnia problem, ale czy może być możliwe przeskalowanie widoku do całego ekranu w taki sposób, że tło jest tutaj skalowane? Dziękujemy za odpowiedzi!

3
Filtry specyficzne dla IE nie są idealnymi rozwiązaniami, więc zachęcamy do korzystania z IE z alternatywami CSS. Osobiście używam „okładki” CSS3 na mojej własnej stronie i działa ona dobrze na urządzeniach z iOS, pamiętaj tylko o zdefiniowaniu szerokości urządzenia.
Klemens,

9
Pokrowiec nie rozciąga bg. 100% 100% tak.
neoswf,

Te rozwiązania działały dla mnie najlepiej, gdy nie chciałem rozciągać obrazu ani w poziomie, ani w pionie bardziej niż w rzeczywistej rozdzielczości. Dzięki..!!
Pan Noddy,

1
Uwaga: Od wersji Chromium 78.0.3904.97 nie jest możliwe skalowanie obrazów svg niezależnie wzdłuż każdej osi. Być może trzeba go przeskalować i przekonwertować na obraz rastrowy.
Mike

567

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.


93
Aby zachować proporcje obrazu, należy użyć „background-size: cover;” lub „rozmiar-tła: zawierają;”. Zbudowałem polifill, który implementuje te wartości w IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

6
Wiem, że to roczek, ale muszę (śmiech) zgodzić się z częścią „przyzwoitych przeglądarek”. Sprawdź wszystkie przeglądarki, ale miałem więcej problemów z IE niż z którąkolwiek z nich.
ErocM

36
Musiałem ustawić, background-size: 100% 100%;aby uzyskać pożądany efekt, o który zamierzałem, jeśli to pomoże komukolwiek innemu.
guanome

1
wyjaśnienie coveri contain na MDN
mohas

2
to nie działa. Pytanie polega na wypełnieniu pojemnika, co oznacza, że ​​chcemy go rozciągnąć, aby się nie powtarzał. Z drugiej strony ta odpowiedź zostanie powtórzona w kierunku wysokości, jeśli wysokość nie obejmuje tego obszaru. „Rozciągnij, aby wypełnić” oznacza rozciąganie, jednak musisz je powtórzyć. Prawidłowa odpowiedź to „przykrycie” od dołu. To faktycznie obsługuje przypadek, że tak nie jest.
gman

171

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.


2
Działa to dobrze ... ale szukało czegoś bardziej solidnego (prawdopodobnie z javascript), które również go wyśrodkuje i dostosowuje w zależności od tego, czy zdjęcie to krajobraz, czy portret. Jeśli ktoś ma rozwiązanie w tym stylu, chciałby link ... dzięki!
Brian Armstrong

4
Jeśli ktoś jest zainteresowany, wydaje się, że działa to dobrze: buildinternet.com/project/supersized
Brian Armstrong

1
Poziome centrowanie można wykonać przy margin: 0 autowłączonym .stretch. Po ustawieniu widthlub heightwspółczynnik kształtu pozostaje taki sam. Spróbuj użyć max-widthi, max-heightaby ograniczyć współczynnik powiększenia ...
Ronald

1
To nie działa dla mnie w ie8 / ie9, ale działa w ie6 / ie7 (i oczywiście we wszystkich innych przeglądarkach). W ie8 / ie9 obraz pokazuje się tylko dla około 3/4 div. Czy ktoś ma ten sam problem?

3
Wada związana z SO: nie ma możliwości zaznaczenia odpowiedzi, które nie są już poprawne, co prowadzi do zepsucia ludzi takich jak @Ullas. Skalowanie tła jest łatwe we wszystkich nowoczesnych przeglądarkach. developer.mozilla.org/en/CSS/background-size
Glenn Maynard

161

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 .


3
Dla podkreślenia, Modernizr NIE włącza obsługi rozmiaru tła w przeglądarkach, które nie obsługują go natywnie. Ma po prostu wygodny test dla różnych przeglądarek. To do ciebie należy sfałszowanie go, gdy test zwróci false.
Chris Moschini

34

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

1
Dziękuję Ci! Różni się to od „rozmiaru tła: okładka”
Pavel Vlasov

1
rozciągnęło się to dla mnie na iPadzie, ale nie skalowało się. dzięki za wysłanie.
Don Cote

1
Jest to świetne, ponieważ tło się kurczy. Dzięki!
beingalex

1
Jeśli obraz tła jest plikiem SVG, konieczne jest również określenie go preserveAspectRatio="none"w pliku SVG. Więcej informacji na ten temat tutaj . Demo tutaj .
Mentalista

możesz użyć rozmiaru tła: okładka; załącznik tła: naprawiony; możesz to skalować
Siraj Ahmed

15

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


2
Świetny artykuł dostępny w A List Apart: Poproś o rozmiar tego tła!
jensgram

3
-1 Nie sądzę, aby ta odpowiedź była bardzo trafna ... i nie oferuje żadnego rodzaju rozwiązania .
Potherca

1
@Potherca ta odpowiedź była wówczas poprawna (prawie 3 lata temu).
Eran Galperin

4
Jest powód, dla którego wyświetlana jest data. Należy zachować dla odniesień historycznych. Czy przeglądasz wszystkie stare odpowiedzi na stronie i oddajesz je na głos? odpowiedź jest nadal poprawna, nawet jeśli od tego czasu dodano więcej informacji. Zauważ też, że inne odpowiedzi tutaj w zasadzie mówią to samo (a niektóre są rzeczywiście niepoprawne - twierdzą, że jest to niemożliwe). Mam wrażenie, że wybrałeś ten, ponieważ ma on kilka głosów.
Eran Galperin,

3
Nie, wybrałem ten, ponieważ wszystko mówi: „Komputer mówi nie”, mimo że istnieje kilka rozwiązań tego problemu jeszcze w 2008 roku ;-)
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;
}

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/


Czym różni się to od „tła: okładki”?
PKHunter

@PKHunter, nie jestem pewien, czego dokładnie dotyczy. Jest to używane background-size: coverz wyjątkiem prefiksów przeglądarki i rozwiązania IE
Blowsie

8

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.


6
@Blowsie - Cute. Sprawdź datę odpowiedzi. Krajobraz przeglądarki nieco się zmienił w ciągu ostatnich 5 lat.
Vilx-

5

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.


Rozciągnij = zmień wymiary xiy niezależnie zmieniając proporcje obrazu, Skala = zmień wymiary xiy proporcjonalnie zachowując proporcje obrazu.
Lawrence Dol

@ SoftwareMonkey: Jako tło nie możesz zmienić rozciągnięcia i skali w prawdziwym tego słowa znaczeniu w prostym CSS. Musisz użyć różnych sztuczek CSS, aby dać złudzenie, że tak właśnie się dzieje, jak opisałem.
BenAlabaster,

4

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

2

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

2

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. */}

2

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/


Nick, zazwyczaj prosimy o podanie istotnych odpowiedzi w odpowiedzi i podanie linku zewnętrznego tylko w celu uzyskania dalszych szczegółów - pomaga to zachować przydatność odpowiedzi w przypadku zepsucia linku.
Lawrence Dol

1
Mój błąd. Ogólnie rzecz biorąc, dodajesz backstretch do <head> swojego dokumentu, a następnie inicjujesz tak: $ (". Your-element"). Backstretch ("path / to / image.jpg");
nickff


1

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

0

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.