방향에 따라 이미지 자르기?

Question

Facebook API를 사용하여 Facebook 페이지에서 6 장의 사진을 가져 와서 div에 표시합니다. 사진의 크기에 관계없이 포함 된 div를 사각형으로하고 싶습니다만 사진의 방향에 따라 이미지 자르기를하고 싶습니다.

예를 들어, 사진을 세로 모드로 찍은 경우 div의 이미지 너비가 div의 너비와 같고 비례 적으로 높이를 조정하고 싶습니다 (div 안에 이미지를 세로로 가운데에 맞 춥니 다).).

가로 모드에서 이미지를 찍은 경우 높이가 div의 높이와 같고 너비가 비례 적으로 (div의 가운데 중앙에 맞춰 지도록) 이미지의 크기를 조정하고 싶습니다.

저는 이것이 몇 가지 자바 스크립트를 필요로한다고 가정합니다.이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

감사합니다.

Answer 1

당신은 배경 이미지로 이미지를 사용하여 깔끔한 뭔가를 할 수 있습니다

CSS의 부분은 다음과 같습니다

<div class="photo-square" style="background-image: url(...);"></div> 

:

.photo-square { 
    background: no-repeat 50%; 
    background-size: cover; 
} 

이제 당신은 자바 스크립트와 배경 이미지를 설정할 수 있습니다 불행히도 IE8 이하에서는 운이 좋지 않습니다. 대체 솔루션이 필요한지 알려주십시오.