di sfondo: come riempire tutta div se un'immagine è piccolo e viceversa

Ho tre problemi:di sfondo: come riempire tutta div se un'immagine è piccolo e viceversa

Quando ho cercato di utilizzare un'immagine di sfondo in un div dimensione più piccola, il div mostra solo una parte Immagine. Come posso mostrare la parte intera o specifica dell'immagine?
Ho un'immagine più piccola e desidero utilizzarla in un div più grande. Ma non voglio usare la funzione di ripetizione.
C'è un modo in CSS per manipolare l'opacità di un'immagine?

2011-01-24 Aakash Sahai

@ david-Cain è necessario aggiornare la più appropriata risposta come sottolineato dai commenti sotto – Ouadie

@Ouadie - Non sono il poster originale - ho semplicemente modificato la domanda per chiarezza. –

@ aakash-sahai potresti aggiornare la risposta accettata a quella più appropriata? – Ouadie

Ridimensionare l'immagine per adattarla alla dimensione div.
Con CSS3 si può fare questo:

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

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

Chi opacità

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

O guardare CSS Image Opacity/Transparency

fonte

2011-01-24 07:28:21 yossi

ma questo creerà un onere sul server per caricare più immagini (che è simile, come lo so) .. quindi invece usare più immagini, usare un'immagine e strechg n collare è un modo migliore..ma non so come farlo .. –

grazie per il problema di opacità ... –

I punti 1 e 2 non sono soluzioni a questo problema. Il primo punto è per mantenere l'aspect ratio su un'immagine, il secondo punto non sembra funzionare affatto. Con CSS3 la proprietà background-size risolverà questo problema, fino a quel momento non dovresti attaccare con qualche hack immagino .. – Sondre

Sono d'accordo con l'esempio di Yossi, allungare il immagine per adattarsi al div ma io n un modo leggermente diverso (senza immagine di sfondo in quanto è poco flessibile in css 2.1). Mostra l'immagine:
```
<div id="yourdiv"> 
    <img id="theimage" src="image.jpg" alt="" /> 
</div> 

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

Mostra parte dell'immagine usando background-position:

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

Idem come la prima parte di (1) l'immagine scalerà al div così grande o più piccolo funzioneranno entrambi
Come quelli di yossi.

fonte

2011-01-24 07:52:21 Bazzz

err, la formattazione del mio post non ha funzionato? Ho usato l'icona della barra degli strumenti ... :( – Bazzz

l'ho provato prima e nw anche ... se la dimensione dell'immagine è 100px 100px e div ha una dimensione 400px 400px, allora è fissata nell'angolo in alto. Non è strechg..background-size lavorando troppo..usando ie8, firefox, chrome, safari ultimi browser –

Ecco un esempio: http://jsfiddle.net/9mawE/1/ Il div è largo 150 px. Il logo di Google è più largo di 150px ma è ridimensionato per adattarsi al div. L'icona di Google Earth è larga meno di 150px e viene ridimensionata per adattarsi al div 150px, Le dimensioni dello sfondo non funzionano in IE 8 perché è il CSS 3 che non è ancora supportato – Bazzz

Piuttosto che dare background-size:100%;
Siamo in grado di dare background-size:contain;
Partenza questo per diverse opzioni disponibili: http://www.css3.info/preview/background-size/

fonte

2013-08-22 07:35:14 vivekj011

Per ingrandire automaticamente l'immagine e coprire l'intera sezione div senza lasciare alcuna parte di esso non riempito , utilizzare:

background-size: cover;

fonte

2014-01-14 11:31:22 Ouadie

Grazie –

non funziona per me ma il mio div è all'interno di un all'interno di un all'interno di un

. non so se questo è il motivo per cui – user1709076

potresti creare un jsfiddle per il tuo ex ampio? quindi possiamo aiutarti – Ouadie

Questo funzionerà come un fascino.

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

fonte

2015-04-15 08:39:03

Grazie. Stavo cercando proprio questo. Ci sono anni fa e ho dimenticato. –

contengono non copre l'intero div. Quindi la copertura sembra essere ciò che l'OP sta cercando. – user3629945

Prova sotto segmento di codice, ho provato io stesso prima:

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

fonte

2015-06-08 19:01:46

Benvenuti in Stack Overflow! Anche se questa risposta è probabilmente corretta e utile, è preferibile includere alcune spiegazioni e spiegare come aiuta a risolvere il problema. Ciò diventa particolarmente utile in futuro, se c'è un cambiamento (possibilmente non correlato) che lo fa smettere di funzionare e gli utenti devono capire come funzionava una volta. –

Questo ha funzionato perfettamente per me

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

fonte

2017-10-05 10:27:23

di sfondo: come riempire tutta div se un'immagine è piccolo e viceversa

risposta

Problemi correlati