La fixation d'un divs image d'arrière-plan pour l'adapter à sa taille?

J'ai un <div> avec une Image de fond.

La <div> taille peut changer au cours du temps.

Est-il possible de réglage de l'Divs image d'arrière-plan pour l'adapter à la <div> taille?

Permet de dire que j'ai un div qui est 400x400 et une Image qui est 1000x1000, est-il possible de rétrécir l'image de 400x400 et donc s'adapter à l' <div> taille?

  • En utilisant seulement le CSS?
InformationsquelleAutor kfirba | 2013-03-09
  1. 56

    Si vous souhaitez utiliser CSS3, vous pouvez le faire assez simplement à l'aide de background-size, comme suit:

    background-size: 100%;

    Il est pris en charge par tous les principaux navigateurs (y compris IE9+). Si vous souhaitez obtenir ce travail dans IE8 et avant, découvrez les réponses à cette question.

    • aucun moyen de le faire en css 2.1?
    • Bon, je suppose que c'est le bon moment pour passer à CSS 3! J'espère que IE prend en charge CSS 3...
    • Je crois que IE9+ prend en charge background-size, et je suis sûr qu'il ya des solutions de rechange pour faire fonctionner tout ça dans IE8 et avant si vous en avez besoin 🙂
    • Je n'ai accepter longtemps 😉 Merci encore!
    • background-size: contiennent; a fonctionné pour moi!
    InformationsquelleAutor lifetimes
  2. 24

    Utilisation background-size à cet effet:

    background-size: 100% 100%;

    Plus sur:

    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    • Jusqu'-vote. Cela fonctionne dans la plupart des cas.
    • Je suis d'accord 🙂 merci
    InformationsquelleAutor
  3. 15

    Utilisation background-size propriété pour y parvenir. Vous devriez choisir entre cover, contain et 100% - en fonction de ce que vous aimeriez obtenir.

    • background-size: contain a fonctionné pour moi!
    • Fonctionne parfaitement
    InformationsquelleAutor MarcinJuraszek
  4. 6

    Vous pouvez réaliser cela avec en arrière-plan, la taille de la propriété, qui est maintenant pris en charge par la plupart des navigateurs.

    À l'échelle de l'image d'arrière-plan pour l'adapter à l'intérieur de la div:

    background-size: contain;

    À l'échelle de l'image d'arrière-plan pour couvrir l'ensemble de la div:

    background-size: cover;
    InformationsquelleAutor Prajwal
  5. 1

    L'utiliser comme il peut également agir en tant que réactif. :

    background-size: cover;
    InformationsquelleAutor Sankalp Singha
  6. 1

    Vous pouvez utiliser le CSS3 background-size propriété.

    .header .logo {
background-size: 100%;
}
    InformationsquelleAutor Haresh Shyara
  7. 0

    Définir votre css pour cette

    img {
    max-width:100%,
    max-height100%
}
    • c'est exactement le problème, je ne veux pas utiliser une image que je veux utiliser un Div avec BG image
    • Ok, je pensais que vous étiez à l'aide d'une image à l'intérieur de la div. Vous devriez utiliser l'arrière-plan de la taille de la propriété alors.
    InformationsquelleAutor miguel.gazela
  8. 0

    Voulais ajouter une solution pour IE8 et inférieur (aussi bas que IE5.5 je crois), qui ne peuvent pas utiliser background-size

    div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
    InformationsquelleAutor chiliNUT