javascript - css layout problem! Come to God

Question

Code effect
http://u6.gg/Xbj

I want to put the avatar into the frame and make it adaptive.

Here comes a master to help me change the code.

Answer 1

1. .bg adds relative positioning;

2. Put a p outside the avatar and use absolute positioning, set the size you want; Use percentages for all key units

3. Avatar setting width, height100%

Answer 2

img length and width are 100%

Answer 3

Image adaptive img {max-width: 100%;}
Place that person in the picture

Answer 4

Add class: <img class="img-box" src="./0.jpg" class="avatar">

class style:

.img-box {
position: absolute;
left: 150px;
top: 25px;
width: 122px;
height: 124px;
}
.bg {
position: absolute;
}
You should find the cut image People want specific sizes, I made them by manual debugging

Answer 5

.bg {
    position: relative;
}

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

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

Change the window size as you wish