javascript - problème de mise en page CSS ! Viens à Dieu

Question

Effet de code
http://u6.gg/Xbj

Je veux mettre l'avatar dans le cadre et le rendre adaptatif.

Quelqu'un peut m'aider à changer le code.

Answer 1

1. .bg ajoute un positionnement relatif ;

2. Placez un p à l'extérieur de l'avatar et utilisez le positionnement absolu, définissez la taille souhaitée Utilisez des pourcentages pour toutes les unités clés

 ;

3. Largeur de réglage de l'avatar, hauteur100%

Answer 2

la longueur et la largeur de l'image sont à 100 %

Answer 3

Image adaptative img {max-width : 100 % ;}
Placez cette personne sur la photo

Answer 4

Ajouter une classe : <img class="img-box" src="./0.jpg" class="avatar">

style de cours :

.img-box {
position : absolue;
gauche : 150px;
haut : 25px;
largeur : 122px;
hauteur : 124px;
}
.bg {
position : absolue;
}
Vous devriez trouver la coupe image Si vous voulez des tailles spécifiques, je les ai faites par débogage manuel

Answer 5

.bg {
    position: relative;
}

.avatar {
    position: absolute;
    top: 9%;
    left: 14.5%;
    width: 12%;
}

.top-bg {
    width: 100%;
    position: relative;
    z-index: 2;
}

Changez la taille de la fenêtre comme vous le souhaitez