你的这个图切的就有问题,咋能一个大背景切成一张图, 正确的作法是把那个框切成一个图, 当p的背景, img是他的子元素, width是100%, 这样不管怎么变都不会有问题

我也觉得你这个切图有问题，勉强实现了你的要求，但不是长久之计。

HTML

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 查看

注意图中箭头所指：

你的样式设置中：backgorund-size:contain，然后我试着放大缩小了，结果，图片本身并没有发生多大的变化，就是不能同步缩放。我也不懂contain这个属性是啥意思...，自己百度吧。。。把这个设置成background-size:auto就好了。

还有一个就是，你的背景图片的位置是设置成center center，即水平，垂直居中。所以你的图片也要设置成水平，垂直居中。关于如何水平垂直居中的，这个你只能百度，google。。了，我这边提供的是css3的居中方法。

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

表示，设置图片水平，垂直居中。

我这边测试的效果是 ok 了，你可以试试看...。

将图片设置为框的背景图片 删除img标签 设置background-size:cover