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é.
J'ai essayé déjà de ne pas avoir travaillé.
OriginalL'auteur Cyclone | 2011-12-06
Vous devez vous connecter pour publier un commentaire.
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.
OriginalL'auteur Leandro Galluppi
Vous pouvez utiliser
background-size
, cependant, seulement la plupart des navigateurs actuels de la soutenir: https://developer.mozilla.org/en/CSS/background-sizeOriginalL'auteur RoToRa
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:
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