Tło: jak wypełnić cały div jeśli obraz jest mały i odwrotnie

mam trzy problemy:Tło: jak wypełnić cały div jeśli obraz jest mały i odwrotnie

Kiedy próbowałem użyć obrazu tła w mniejszym rozmiarze div div pokazuje tylko część obraz. Jak mogę wyświetlić pełną lub określoną część obrazu?
Mam mniejszy obraz i chcę go użyć w większym div. Ale nie chcę używać funkcji powtarzania.
Czy istnieje jakiś sposób w CSS do manipulowania kryciem obrazu?

2011-01-24 Aakash Sahai

@ david-Kaina należy zaktualizować najwłaściwszym Odpowiedź jak wskazano w komentarzach poniżej: – Ouadie

@Oadadie - nie jestem oryginalnym plakatem - po prostu zredagowałem to pytanie dla jasności. –

@ aakash-sahai, czy możesz zaktualizować zaakceptowaną odpowiedź na najbardziej odpowiednią? – Ouadie

Zmień rozmiar obrazu, aby dopasować go do rozmiaru div.
Z CSS3 można to zrobić:

/* with CSS 3 */ 
#yourdiv { 
    background: url('bgimage.jpg') no-repeat; 
    background-size: 100%; 
}

How Do you Stretch a Background Image in a Web Page:

O nieprzejrzystości

#yourdiv { 
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
}

Albo spojrzeć na CSS Image Opacity/Transparency

Źródło

2011-01-24 07:28:21 yossi

, ale to spowoduje obciążenie serwera, aby załadować wiele obrazów (co jest podobne, jak wiem) .. więc zamiast korzystać z wielu obrazów, za pomocą jednego obrazu i streszania n jest lepszym sposobem ... ale nie wiem jak to zrobić .. –

thanx dla problemu krycia ... –

Punkt 1 i 2 nie rozwiązuje tego problemu. Pierwszy punkt dotyczy zachowania proporcji obrazu, drugi punkt w ogóle nie działa. W CSS3 właściwość background-size naprawi ten problem, aż do momentu, w którym będziesz musiał trzymać się jakiegoś hacka, chyba .. – Sondre

zgadzam się z np Yossi za naciągnąć obrazek pasujący do div ale i w nieco inny sposób (bez obrazu tła, ponieważ jest trochę mało elastyczny w css 2.1). Pokaż pełny obraz:
```
<div id="yourdiv"> 
    <img id="theimage" src="image.jpg" alt="" /> 
</div> 

#yourdiv img { 
    width:100%; 
    /*height will be automatic to remain aspect ratio*/ 
} 
```

Pokaż część obrazu za pomocą background-position:

#yourdiv 
{ 
    background-image: url(image.jpg); 
    background-repeat: no-repeat; 
    background-position: 10px 25px; 
}

sama jak pierwsza część (1) obraz będzie skalowany do div tak większe lub mniejsze oba będą działać
To samo co Yossi.

Źródło

2011-01-24 07:52:21 Bazzz

err, formatowanie mojego posta nie działa? Użyłem ikony paska narzędzi ... :( – Bazzz

wypróbowałem ją wcześniej i nw także ... jeśli rozmiar obrazu to 100px 100px, a div ma rozmiar 400px 400px to jest on ustalony w górnym corner.itz nie strechg..background-size not działa również ... używając ie8, firefox, chrome, safari najnowsze przeglądarki –

Oto przykład: http://jsfiddle.net/9mawE/1/ Element div ma szerokość 150 pikseli. Logo Google ma szerokość ponad 150 pikseli, ale jest pomniejszone aby zmieścić się w div. Ikona Google Earth ma szerokość mniejszą niż 150 pikseli i jest skalowana do rozmiaru div o wielkości 150 pikseli. Rozmiar tła nie działa w IE 8, ponieważ jest on nadal nieobsługiwany w CSS 3. – Bazzz

Zamiast dając background-size:100%;
Możemy dać background-size:contain;
Sprawdź ten dla różnych opcji dostępny: http://www.css3.info/preview/background-size/

Źródło

2013-08-22 07:35:14 vivekj011

Aby automatycznie powiększyć obraz i pokrywa całą sekcję div bez pozostawiania jakichkolwiek jego części niewypełnione , użyj:

background-size: cover;

Źródło

2014-01-14 11:31:22 Ouadie

Najmniejszy komentarz ta strona i największa korzyść w moim przypadku. Dzięki –

nie działa dla mnie, ale mój div jest wewnątrz wewnątrz wewnątrz

. Nie wiem, czy to dlatego – user1709076

mógłbyś utworzyć jsfiddle dla swojego ex dużo? abyśmy mogli Ci pomóc – Ouadie

To zadziała jak urok.

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png"); 
background-repeat: no-repeat; 
background-size: contain;

Źródło

2015-04-15 08:39:03

Dzięki. Szukałem właśnie tego. Czy to lata temu i zapomniałem. –

zawierają nie obejmuje cały div. Tak więc wygląda na to, czego szuka op. – user3629945

Spróbuj poniżej segmentu kodu, próbowałem to sam przed:

#your-div { 
    background: url("your-image-link") no-repeat; 
    background-size: cover; 
    background-clip: border-box; 
}

Źródło

2015-06-08 19:01:46

Witamy w Stack Overflow! Chociaż ta odpowiedź jest prawdopodobnie poprawna i przydatna, zaleca się, aby wraz z nią wyjaśnić, w jaki sposób pomaga rozwiązać problem. Staje się to szczególnie przydatne w przyszłości, jeśli nastąpi zmiana (prawdopodobnie niezwiązana ze sobą), która powoduje, że przestaje działać, a użytkownicy muszą zrozumieć, w jaki sposób działał. –

To działało idealnie dla mnie

background-repeat: no-repeat; 
background-size: 100% 100%;

Źródło

2017-10-05 10:27:23

Powiązane problemy

Tło: jak wypełnić cały div jeśli obraz jest mały i odwrotnie

Odpowiedz

Powiązane problemy