css 인라인 블록 이미지 목록 슬라이더

Question

이미지 슬라이더의 프로토 타입이 있습니다. 피들 here!

<div style="display:block;border:1px solid red;"> 
<ul style="margin:0px; padding: 0px ;white-space:nowrap; "> 
    <li style="display: inline-block;"> 
     <div style="width:100px;height:100px;text-align: center;border:1px solid black;">A</div>  
    </li> 

    <li style="display: inline-block;"> 
     <div style="width:300px;height:100px;text-align: center;border:1px solid black;">B</div>  
    </li> 

    <li style="display: inline-block;"> 
     <div style="width:450px;height:100px;text-align: center;border:1px solid black;">C</div>  
    </li> 

</ul> 

는 불행하게도 나는 그것이 부모의 폭을 초과하기 때문에 이미지가 잘립니다지고 문제가 있습니다. 잘리지 않고 표시 할 수 있습니까? 내가 말할 수있는 모든 팁이나 샘플 작품. 감사!

Answer 1

해결 방법 1 : 당신은 부모 컨테이너 오버 플로우를 만들 수 있습니다 : 자동 또는 오버 플로우-x :는

해결 방법 2 스크롤 : 당신이 할 수있는 대신 이미지 인라인을 호출하는, 당신이 배경으로들을 수 있습니다 이미지를 표시하고 일부분을 보여줍니다. 이미지> 너비 : 100 % 또는 배경 크기 : CSS로 표지를 둘러 볼 수 있습니다