javascript - 적응 문제 관련. 긴급한
PHPz
PHPz 2017-05-19 10:14:03
0
4
645

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

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

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

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

PHPz
PHPz

学习是最好的投资!

모든 응답(4)
过去多啦不再A梦

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

phpcn_u1582

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

HTML

으아아아

CSS

으아아아

Jsfiddle 보기

仅有的幸福

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

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

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

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

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿