Ho uno <div> con un'immagine di sfondo.Impostazione di un'immagine di sfondo div in base alle sue dimensioni?
La dimensione <div> può variare nel tempo.
E 'possibile impostare l'immagine di sfondo Div in modo che si adatti alla dimensione <div>?
Diciamo che ho un div che è 400x400 e di un'immagine che è 1000x1000, è possibile ridurre l'immagine per 400x400 e quindi adattarsi alle dimensioni <div>?
Se vuoi utilizzare CSS3, è possibile farlo abbastanza semplicemente utilizzando background-size, in questo modo:
background-size: 100%;
E 'supportato da tutti i principali browser (tra cui IE9 +). Se desideri farlo funzionare in IE8 e prima, controlla le risposte a this question.
un modo per farlo in css 2.1? – kfirba
OK, indovina è il momento giusto per passare al CSS 3! Spero che IE supporti i CSS 3 ... – kfirba
@kfirba Credo che IE9 + supporti le dimensioni in background, e sono sicuro che ci sono dei work-around per farlo funzionare in IE8 e prima se ne hai bisogno :) – lifetimes
Usa background-size a tal fine:
background-size: 100% 100%;
Maggiori info su:
Voto positivo. Questo funziona nella maggior parte dei casi. – NINCOMPOOP
Concordo :) grazie SO – JustJohn
Usa background-size proprietà per raggiungere questo obiettivo. Dovresti scegliere tra cover, contain e 100% - a seconda di cosa esattamente vorresti ottenere.
impostare il vostro CSS per questo
img {
max-width:100%,
max-height100%
}
questo è esattamente il problema, non voglio usare un'immagine Voglio usare un div con BG image – kfirba
Ok, pensavo che stavi usando un'immagine all'interno del div. Dovresti quindi utilizzare la proprietà background-size. –
voluto aggiungere una soluzione per IE8 e di seguito (a partire da IE5.5 credo), che non può utilizzare background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
usare questo come può anche agire come reattivo. :
background-size: cover;
È possibile ottenere ciò con la proprietà background-size, che ora è supportata dalla maggior parte dei browser.
per scalare l'immagine di sfondo per adattarsi all'interno del div:
background-size: contain;
Per scalare l'immagine di sfondo per coprire l'intero div:
background-size: cover;
è possibile utilizzare la proprietà CSS3 background-size per Questo.
.header .logo {
background-size: 100%;
}
Utilizzare _just_ CSS? –