La largeur de l'image d'arrière-plan

C'est mon code HTML:

<div id="user-avatar"><img src="/imgs/frame.png" alt=""/></div>

user-avatar classe est la suivante:

#user-avatar {
     width: 100px;
     height: 100px;
     margin: auto;
     position: relative;
     background: url(images/avatars/128.jpg) 50% 50% no-repeat;
}

Cadre:

#user-avatar img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     width: 122px; 
     height: 127px; 
     margin-top: -62px; 
     margin-left: -63px; 
}

Original user-avatar image d'arrière-plan, les dimensions sont 23x25 mais je veux qu'il soit redimensionnée à la 100x100px, et le problème est que tout ce que j'ai mis dans le width: xxx attribut, il ne veux pas travailler. L'avatar qui est derrière l'image a chaque fois que ses dimensions d'origine.

essayer cela et voir si cela fonctionne width: 100px !important;
J'ai essayé déjà de ne pas avoir travaillé.

OriginalL'auteur Cyclone | 2011-12-06

  1. 5

    Vous ne pouvez pas redimensionner une image en tant que fond d'un récipient. La seule façon que vous pouvez redimensionner une image à l'aide d'une balise img et de la redimensionner avec la largeur et la hauteur des attributs css.

    Prendre un coup d'oeil ici peut-être que ça aide.

    En fait, avec CSS3 compatible navigateurs qui le supportent, vous pouvez.

    OriginalL'auteur Leandro Galluppi

  2. 3

    Vous pouvez utiliser background-size, cependant, seulement la plupart des navigateurs actuels de la soutenir: https://developer.mozilla.org/en/CSS/background-size

    OriginalL'auteur RoToRa

  3. 3

    Vous pouvez utiliser le CSS3 background-la taille de la propriété, pour les navigateurs qui le supportent, avant de retomber à une solution de compromis pour les anciens navigateurs. La solution de compromis pourrait être de définir une couleur d'arrière-plan pour remplir l'espace autour de l'image de fond ou d'utiliser le background-repeat à la propriété "tuile" de l'image.

    Par exemple:

    #user_avatar {
    ...
    background: url(images/avatars/128.jpg) blue 50% 50% no-repeat;
    background-size: 100px 100px;
}
    Eh bien, est-il un moyen de le faire dans le img balise pour le meilleur compalibility?
    Je suppose que vous pourriez utiliser deux balises img. L'un, l'arrière-plan, aurait src images/avatars/128.jpg et l'autre, au premier plan, ont src /dim/armature.png. Ensuite, vous devez utiliser le positionnement absolu de mettre les deux balises img à la position correcte par rapport à #l'utilisateur avatar, puis définissez le z-index de l'avant-plan img supérieure à celle de l'arrière-plan img.

    OriginalL'auteur dgvid