오버플로 방지 : 이미지 자르기가 숨김

저는 회전식 작업을하고 있습니다. 바로 아래에있는 페이스 북의 F8 사진 회전식 사진을 모델로했습니다. their page.오버플로 방지 : 이미지 자르기가 숨김

내 회전 목마 구조는 기본적으로 동일 : 나는 용기 내부

.container { 
    width: 100%; 
    position: relative; 
    height: 450px; 
    overflow: hidden; 
    div { 
    position: absolute; 
    top: 0; 
    width: 1400px; 
    display: inline-block; 
    background-position: center; 
    background-size: 1400px 450px; 
    background: url('...'); 
    height: 100%; 
    } 
    &:nth-child(2) { left: 1400px; } 
}

중첩 된 자식 div의이

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div>

SCS들에 대한 둘 화면 폭보다 더 큰 내가 스크롤 할 그것들을 수평으로. 그러나 컨테이너의 overflow : hidden을 설정하여 캐 러셀을 페이지 너비로 제한하여 화면 끝을지나 스크롤 할 때 div의 나머지 부분이 잘립니다.

캐 러셀을 가로로 스크롤하려면 간격을 설정하고 transform : translateX()를 사용하여 수십 ms마다 몇 픽셀 씩 이동시킵니다.

이미지를 자르지 않고 화면 크기보다 가로로 스크롤 할 수 없도록하려면 어떻게해야합니까?

출처

2017-03-02 Chang Liu

질문을 업데이트하여 관련 코드를 [최소, 완전하고 검증 가능한 예제] (http://stackoverflow.com/help/mcve)에 표시하십시오. 우리는 CSS를 보지 않고 CSS를 고칠 수는 없습니다. –

@ObsidianAge 어이, 유감스럽게 생각 합니다만, 스타일로 내 질문을 업데이트했습니다. –

jk 실수로 컨테이너 요소를 번역 중이었습니다.

컨테이너 요소를 두 이미지의 전체 너비로 만든 다음 overflow : hidden 및 width : 100 %가있는 다른 컨테이너 요소로 컨테이너 요소를 고정하여 문제를 해결했습니다.

출처

2017-03-02 09:33:52

오버플로 방지 : 이미지 자르기가 숨김

답변

관련 문제