2016-08-30 5 views
0

작동하지 조정 : 그것은 잘 작동하지만, http://particleslider.com/입자 슬라이더 모바일은 내 페이지에서이 입자 슬라이더를 사용하고

모바일 기기는 크기 조정되지 않습니다. 장치 크기에 따라 화면 중간에 위치합니다. 입자 슬라이더는 이미지 URI를 사용하여 이미지를 입자로 변환합니다. 이미지의 폭이 전화 폭보다 큰 경우, 축소하지 않습니다 - 그것은 다음과 같이 수평으로 중복 :

enter image description here

가 어떻게 그렇게 전체 이미지를 표시 할 수 있습니다 축소 할 수의 무관 장치 너비?

+0

그것은 입자 웹 사이트에서 작동하는 것 같습니다. 상충되는 이미지의 너비 또는 높이가 엉망이 되었습니까? CSS, HTML 및 JS의 예가 있습니까? – ClosDesign

답변

0

그것은 입자 웹 사이트에서 작동하는 것 같습니다. 상충되는 이미지의 너비 또는 높이가 엉망이 되었습니까? CSS, HTML 및 JS의 예가 있습니까? CSS에서는 요소의 외부 컨테이너가 너비가 아니라 최대 너비가 95 % 인 CSS를 설정하고 있습니다. JS로 옵션으로 너비를 설정 했습니까?

정적 너비를 설정하는 문서에 따르면 기본값은 800입니다.

// Create a 100px wide ParticleSlider. 
    var ps = new ParticleSlider({ 
    width: 100 
    }); 

대부분의 경우 CSS를 사용하여 문제를 해결할 수 있습니다. 첫 번째로, ParticleSlider()에 너비를 넣지 마십시오. 둘째, 슬라이더의 컨테이너 요소의 최대 너비를 95 %와 같이 설정하십시오.

그들의 CSS는 코드가있는 경우, 그것을 게시하시기 바랍니다 그들의

#particle-slider { 
width: 41.8em; 
height: 26.3em; 
margin: 0 auto; 
} 

이 같은 것을 보여줍니다.

+0

답변 해 주셔서 감사합니다. codepen의 [this] (http://codepen.io/Zaku/pen/EDaun) 예제를 사용하고 있습니다. 내 코드는 거의 동일하지만 이미지를 제외하고는 아무 것도 변경하지 않았습니다. 어쩌면 내가 더 큰 이미지를 추가했기 때문일까? 또한 너비를 100으로 지정하고 너비를 제거하려고 시도했지만 작동하지 않았습니다. 또한 해당 CSS 추가 시도하고 작동하지 않았다. – busuu