가변 크기 축소판을 사용하여 사진 갤러리를 만드는 가장 쉬운 방법은 무엇입니까?

Question

미리보기 이미지가 콜라주처럼 보이는 Google+의 '내 서클 사진'과 같은 갤러리를 만들고 싶습니다.

• 썸네일은 사진의 종횡비를 유지합니다.
• 갤러리 행의 높이가 비슷합니다 (동일하지는 않지만 매우 가깝습니다).
• 축소판 사이의 간격은 모든 곳에서 동일합니다.
• 갤러리는 사각형으로 채 웁니다.
• 사진이 잘리지 않습니다. 그들은 단지 공간을 채우기 위해 크기가 조정됩니다.

예와 스크린 샷 참조하십시오 : 나는 프로그래밍 방식으로 클라이언트 측에서이 같은 스타일 갤러리 미리보기에 CSS/자바 스크립트/jQuery를 사용하는 방법을 배우고 싶은 http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg

합니다.

답변 해 주셔서 감사합니다.

Answer 1

이 쓰기까지가 도움이 찾을 수 있습니다 : Building a Google Plus Inspired Image Gallery

그는 이미지를 정렬을 필요로하지 않는 기술을 사용, 그것은 매우 간단합니다. 기본적으로 축소판 행의 너비 W를 알면 총 너비가 W를 초과 할 때까지 미리보기 이미지를 계속 배치합니다. 너는 W를 40 픽셀 초과한다고 가정 해 봅시다. 이제 행의 각 미리보기 이미지를 자르기 (CSS를 통해)하여 총 40 픽셀을 제거하십시오. 기본적으로, 숨겨진 작물 이미지, 수평 부정적인 여백 센터 그것을 :

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;"> 
    <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" /> 
</div> 

오버 플로우 : 말하자면, 당신은 이미지에서 10px를 자르려, 경우

,이 같은 뭔가를 할 수 .

Answer 2

내가보기에 단순화 할 것입니다 (예 : 제공하는 수치가 픽셀 정확도가 100 %가되지 않음). 그러나이를 달성하기위한 한 가지 방법이 제공됩니다.

스크린 샷을 보면 대략 4x3 화면비 (또는 3x4 역상)의 이미지 목록이 표시됩니다. 이 종횡비는 레이아웃의 핵심입니다. 채워지는 전체 사각형은 모든 종횡비가 될 수 있지만 일부 너비와 높이의 배수 여야합니다. 예를 들어, 각 행에는 세로보기와 가로보기 사진이 있습니다. 그러나 전반적인 효과는 G +가 많은 이미지 풀에서 이미지를 가져올 수 있으므로 개별 가로 세로 비율 (가로 또는 세로 이미지)의 요구 사항을 충족하는 이미지 조합을 선택할 수 있으며 포함하는 사각형의 전체 가로 세로 비율

풀에서 사용할 수있는 이미지를 찍은 다음 가로 세로 비율 (간단한 너비를 높이로 나눈 값)을 계산합니다. 그런 다음 이미지를 가로 세로 비율로 그룹화하십시오.

마지막으로, 레이아웃에 대해 까다로운 부분은 가로 세로 비율의 조합이 왼쪽에서 오른쪽으로 완전히 채워질 행을 알아 내야한다는 것입니다.

1. 1 행 = 4 풍경 사진
2. 2 행 = 2 풍경 사진, 2 개 세로의 사진들, 그리고 1 개 평방 사진
3. 3 행 = 3 풍경 사진, 1 : 스크린 샷에서 우리는 세 등의 예를 참조하십시오 세로 사진 및 1 스퀘어 사진

결과적으로 모든 축소판의 높이가 같기 때문에 결합 된 너비가이 특정 조합에서 원하는 너비의 레이아웃 사각형을 제공합니다.의 목록을 확인 가능한 "사진 수영장"

에있는 모든 사진의

1. 계산 가로 세로 비율 :

   그래서, 나는이 특정 문제를 해결하는 것은 기본적으로 4 하위 문제를 해결하는 문제라고 생각합니다 원하는 너비 (단일 행을 만들기 위해)가되는 사진의 종횡비의 모든 조합

2. 사용할 수있는 사진의 풀에서 어떤 조합으로 어떤 사진을 결합하여 하나의 구성된 행으로 만들 수 있는지 알아냅니다. 이미지
3. 마지막으로, 단계 s 1-3 이미지의 단일 행을 만듭니다. 전체 직사각형을 얻으려면 1-3 단계를 사용하여 원하는만큼의 이미지 행을 만든 다음 서로 쌓아 올리면됩니다.

Answer 3

이것은 전형적인 cutting stock problem입니다. branch and bound method 또는 dynamic programming을 사용하여 해결할 수 있습니다.

일반적으로 Google은 사진의 거대한 기반을 가지고 있으므로 적절한 너비 조합을 찾는 것이 더 쉽습니다.

제한된 수의 조합 (256 개)을 만드는 종횡비 세트 (예 : 16)를 사용하는 것이 좋습니다. 변환 전의 모든 그림은 비율을 조정하거나 가까운 종횡비로 잘라야합니다.

몇 가지 해결 방법이 필요한 매우 넓은 그림이있을 수 있습니다. 잘린 또는 너비는 행 및 높이 변수의 너비 여야합니다. 또한 간격도 어떻게 든 해결해야합니다. 모든 사진을 한 행에 합치고 간격을 사진 위에 흰색 오버레이로 넣습니다.