javascript - 적응 문제 관련. 긴급한

Question

효과와 코드는 여기
http://u6.gg/RJD

내가 원하는 최종 효과는 다음과 같습니다.

사용자의 아바타를 배경 프레임에 넣기만 하면 됩니다. 하지만 창이 줄어들면 아바타는 위치를 벗어나게 됩니다.

방법이 없을까요? ? 나는 다른 사람들이 그것을 이룰 수 있다는 것을 보았지만 지금은 그것을 찾을 수 없습니다.

Answer 1

사진을 자르는 데 문제가 있습니다. 어떻게 큰 배경을 하나의 사진으로 잘라낼 수 있나요? 올바른 방법은 프레임을 하나의 사진으로 자르는 것입니다. p의 배경이 img이고 하위 요소입니다. 너비는 100%입니다. 이렇게 하면 어떻게 변경해도 문제가 없습니다

Answer 2

또한 귀하의 컷아웃에 문제가 있는 것 같습니다. 귀하의 요청을 거의 충족할 수 없지만 장기적인 해결책은 아닙니다.

HTML

으아아아

CSS

으아아아

Jsfiddle 보기

Answer 3

그림의 화살표가 가리키는 부분에 주목하세요:

스타일 설정: backgorund-size:contain에서 확대 및 축소를 시도한 결과 사진 자체는 크게 변경되지 않았지만 동기화되지 않았습니다. contain 속성이 무엇을 의미하는지 모르겠습니다. 직접 검색해 보겠습니다. . . 배경 크기:자동으로 설정하세요. backgorund-size:contain，然后我试着放大缩小了，结果，图片本身并没有发生多大的变化，就是不能同步缩放。我也不懂 contain 这个属性是啥意思...，自己百度吧。。。把这个设置成 background-size:auto 就好了。

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

또 다른 점은 배경 이미지의 위치가 중앙 중앙, 즉 수평 및 수직 중앙에 설정되어 있다는 것입니다. 따라서 이미지도 수평 및 수직 중앙에 설정되어야 합니다. 수평 및 수직 중앙에 배치하는 방법은 Baidu 또는 Google만 사용할 수 있습니다. . 예, 여기서 제공하는 것은 css3의 센터링 방법입니다. 🎜 으아아아 🎜 그림을 가로 및 세로 중앙에 맞추는 것을 의미합니다. 🎜 🎜여기 테스트 결과는 괜찮습니다. 시도해 보세요... 🎜

Answer 4

이미지를 프레임의 배경 이미지로 설정 img 태그 삭제 배경 크기 설정:cover