CSS : 다른 크기의 이미지로 flickity 회전식 컨베이어 사용

Question

매우 간단한 질문인데 죄송 합니다만 저는 웹 개발자로 시작하고 있습니다. 지금 당장은 매우 단서가 없습니다!

여기 내 (범인) 웹 사이트에 대한 링크를 찾아주세요 :

그래서 내 페이지에서 스크롤 회전 목마를 좋아하고 것 http://imranahmed.io/,이 일을, 내가 flickity을 사용하고 있습니다.

웹 사이트를 방문하면 두 번째 이미지가 페이지 가장자리가 아닌 페이지의 중간에있는 세 번째 이미지로 이동한다는 것을 볼 수 있습니다 (따라서보기가 매우 나쁩니다. 예를 참조하십시오). 이하). 이를 방지하기 위해 max-width:100%에 crop 자체에 이미지 사업부를 얻기의 방법이 있다면

지금, 나는 궁금 해서요? 나는 이것을 CSS 파일에서 구현하려고 시도했지만 아무런 도움이되지 못한다. (커버 기능은 아무런 도움이되지 않는다.)

나는 무엇이 여기에 놓치고 있나?

마지막으로 휴대 전화에서 창 크기를 줄이거 나 웹 사이트를로드 할 때이 슬라이더가 완전히 손실됩니다. 왜 이런 경우입니까? 이 스위치를 관리하는 것은 무엇입니까? 이 문제를 피하기위한 거리가 있습니까? (이전처럼 이미지를로드하는 것만으로 수평으로 자릅니다.)

나는 관련 HTML과 CSS 코드를 아래에 첨부했습니다 :

HTML :

<div class="flickity-slider"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

는 CSS :

.landing-page .flickity-slider{ 
    height: 30%; 
} 
.landing-page .carousel-cell{ 
    width: 100%; /* full width */ 
    height: 470px; /* height of carousel */ 
    max-height: 470px; 
    max-width: 100%; 
    margin-right: 10px; 
    display: inline-block; 
    position: relative; 

} 
.landing-page .carousel-image{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
} 

내가 어떤 조언을 부탁드립니다! 감사!

Answer 1

유일한 문제는 코드의 이미지를 변경하는 것입니다. 코드에서 아래의 CSS 만 업데이트하면됩니다.

.landing-page .carousel-image{ 
    position: absolute; 
    transform: translate(0, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
}