国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

There is a problem with the cutting of your picture. How can a large background be cut into one picture? The correct way is to cut the frame into one picture. When the background of p is, img is its child element, and the width is 100%. , this way there will be no problem no matter how you change it

I also think there is something wrong with your cutout. I can barely achieve your request, but it is not a long-term solution.

HTML

<p class="flex-box">
    <img class="bgCover" src="http://www.1ymlh.com/img/dpm/avatar_border1.png">
    <img class="avatar" src="http://www.1ymlh.com/img/132.png">
</p>

CSS

.flex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.bgCover {
    position: relative;
    left: 2px;
    top: 4px;
}

.avatar {    
    width: 284px;        
    position: absolute;
}

Jsfiddle view

Pay attention to what the arrow in the picture points to:

In your style settings: backgorund-size:contain，然后我試著放大縮小了，結(jié)果，圖片本身并沒(méi)有發(fā)生多大的變化，就是不能同步縮放。我也不懂 contain 這個(gè)屬性是啥意思...，自己百度吧。。。把這個(gè)設(shè)置成 background-size:auto That’s it.

Another thing is that the position of your background image is set to the center center ，即水平，垂直居中。所以你的圖片也要設(shè)置成水平，垂直居中。關(guān)于如何水平垂直居中的，這個(gè)你只能百度，google。。了，我這邊提供的是 css3 centered method.

position:absolute;
left:50%;
top:50%;
transform:translate3d(-50% , -50% , 0px);

means to set the picture to be horizontally and vertically centered.

The result of my test here is ok, you can try it...

Set the image as the background image of the frame. Delete the img tag. Set background-size:cover