구글포토에서 사진을 가져와서 슬라이드쇼를 해주는 사이트를 만들고 있습니다.
다행히 PHP API 가 있어서, 사진을 가져오는 것 까지는 성공했고 (제가보기에) 그럴듯하게 띄우는 것 까지는 성공했는데,
문제는 세로사진이네요.
대부분의 사진이 가로사진이고, 일반적인 모니터의 경우 가로 길이가 세로 길이보다 길기 때문에 css 속성을 다음과 같이 주었더니,
object-fit:cover;
object-position:center;
사진의 중앙 부분만 보이면서 위 아래가 잘려서 자연스럽지가 않았습니다.
object-fit:contain;
위와 같은 속성을 주는 것도 방법이지만, 모니터 화면비와 이미지 화면비가 맞지 않아서 상하/좌우 여백이 생겨 이것 또한 어색합니다.
그래서 제가 생각한 방법이 세로사진의 경우 Pan 효과를 주어서 이미지 전체를 볼 수 있도록 하는 방법인데,
아래 유투브 영상 (25초 부분부터) 처럼 Panning 하면서 사진을 보여주되 세로로 움직인다고 보시면 됩니다.
구글링을 하여도 마땅한 레퍼런스가 나오지 않네요.
혹시 방법이 있나.. 해서 여쭤봅니다.
https://codepen.io/osublake/pen/BLOoOP