Flexbox가있는 적응 형 사진 레이아웃

Flexbox를 사용하여 적응 형 사진 레이아웃, 가볍고 효율적입니다! 이 기사는 Flexbox를 사용하여 수평 폭포 스트리밍 사진 레이아웃을 만드는 가벼운 접근 방식을 소개하여 JavaScript없이 모든 크기의 사진을 완벽하게 배열 할 수 있습니다.

이 솔루션은 경량뿐만 아니라 매우 간단합니다. 우리는 변하지 않은 이미지 목록과 17 줄의 CSS 코드 만 있으면되며 핵심은 Flexbox 및 object-fit Properties에 있습니다.

이 방법을 선택하는 이유는 무엇입니까?

나는 두 가지 취미가 있습니다 : 사진과 함께 삶을 녹음하고 CSS 속성을 결합하는 흥미로운 방법 (신규 및 오래된).

몇 주 전, 나는 Xoxo 이벤트에 참석하고 많은 사진을 찍고 마침내 39 개의 아름다운 사진을 필터링했습니다. 내 컨텐츠를 더 잘 관리하기 위해 지난 몇 년 동안 간단한 사진 블로그를 만들려고 노력했지만 이상적인 레이아웃을 달성 할 수 없었습니다. 종횡비를 유지하면서 사진이 라인을 채우는 간단한 폭포 레이아웃 (iOS, Google 사진, Flickr…).

가볍고 자바 스크립트 옵션이 있는지 확인하기 위해 연구를 수행했지만 내 요구와 일치하는 솔루션을 찾을 수 없었습니다. 비행 지연을 기다리는 동안, 나는 코드를 시도하기 시작했고 코드를 가능한 한 간결하게 유지하는 것을 제한합니다 (이것이 제가 재미 있다고 생각하기 때문입니다).

기본 HTML 구조

기본적으로 이미지 목록을 만들기 때문에 순서가없는 목록을 선택했습니다.

<li> <li>

Flexbox의 멋진 사용

그런 다음 일련의 영감이 있습니다.

<li> Flexbox는 셀의 함량에 따라 셀 폭을 결정하여 행을 채우는 데 이상적입니다. <li> 이것은 모든 이미지 (토지 또는 초상화)가 높이가 같은 것을 필요로한다는 것을 의미합니다. <li> 나는 object-fit: cover; 이미지가 셀을 채우는지 확인합니다.

이론적으로 이것은 신뢰할 수있는 솔루션처럼 들리며 90% 만족 한 결과를 제공합니다.

 ul {
  디스플레이 : Flex;
  플렉스 랩 : 랩;
}

Li {
  높이 : 40VH;
  Flex-Grow : 1;
}

img {
  최대 높이 : 100%;
  최소값 : 100%;
  객체 적합 : 덮개;
  수직 정상 : 바닥;
}

참고 : 40vh 데스크탑 브라우저에서 가장 좋은 초기 접근 방식 인 것으로 보이며, 합리적인 크기의 전체 사진 2 줄을 표시하고 아래 사진이 더 많음을 시사합니다. 또한 라인마다 더 많은 사진을 표시 할 수 있으므로 종횡비를 크게 향상시킵니다.

스트레칭 문제의 마지막 줄을 처리하십시오

내가 가진 유일한 문제는 Flexbox가 실제로 모든 행을 채우고 싶어한다는 것입니다. 그리고 마지막 사진 행의 종횡비에 대해 이상한 일을한다는 것입니다. 이것은 아마도이 레이아웃에서 내가 가장 좋아하는 것 같지만 목록 끝에 빈 것을 추가해야했습니다.<li> 요소.

<li>

다음 CSS 코드와 결합 :

 Li : Last-Child {
  Flex-Grow : 10;
}

참고 : 여기에는 "10"을 사용하는 과학적 근거가 없습니다. 이것은 모든 테스트에서 최상의 결과를 제공합니다.

데모 (데모 링크 또는 코드 스 니펫을 여기에 삽입해야합니다)

뷰포트 최적화

다른 뷰포트 방향으로 작업 할 때는 몇 가지 요소를 고려해야합니다.

수직 스크린

뷰포트 높이가 너비보다 크면이 방법은 행당 사진 수를 제한하여 종횡비에 영향을 미칩니다. 이 문제를 해결하려면 간단한 미디어 쿼리를 사용하여 사진 줄을 짧게 만들 수 있습니다.

 @Media (Max-Aspect-Ratio : 1/1) {
  Li {
    높이 : 30VH;
  }
}

더 짧은 화면

작은 수평 장치에 적응하려면 사진의 높이를 늘리면 가능한 한 큰 사진을 표시하는 데 도움이 될 수 있습니다.

 @Media (Max-Height : 480px) {
  Li {
    높이 : 80VH;
  }
}

더 작은 수직 스크린

대부분의 전화기는 사진을 축소하지 않고 Flexbox가 제대로 작동하도록하기에 충분히 넓지 않으므로 한 줄에 여러 사진을 보관하지 않기로 결정했습니다. 그럼에도 불구하고 최대 높이를 여기에서 설정하는 것은 그만한 가치가 있으므로 최소한 목록의 다음 사진을 엿볼 수 있습니다.

 @Media (Max-Aspect-Ratio : 1/1) 및 (Max-Width : 480px) {
  ul {
    플렉스 방향 : 열; /* 열 방향으로 변경*/
  }

  Li {
    높이 : 자동;
    너비 : 100%;
  }

  img {
    너비 : 100%;
    맥스 높이 : 75VH;
    최소 폭 : 0;
  }
}

요약

이 접근법은 사진의 종횡비를 완전히 존중하지는 않지만 (이미 가깝습니다) 때때로 이상한 결과로 이어집니다. 그러나 나는 단순성과 유연성을 절대적으로 좋아합니다. 갤러리가 수직 대신 가로로 스크롤하도록하려면 원하십니까? 약간 조정하십시오. 갤러리에 1,000 장의 사진이 있습니까? 모두 좋아 보인다. 종횡비에 대해 확실하지 않습니까? Flexbox가 최선의 선택입니다. 아직 데모를 보지 못했다면 다시 읽고 당신의 생각을 알려주십시오!

추가 팁

이 사진의 크기에 따라 이러한 페이지는 여러 메가 바이트로 매우 빠르게 성장할 수 있습니다. 내 블로그 에서이 문제를 해결하기 위해 loading="lazy" 추가했습니다. 이 속성을 사용하면 스크롤 할 때 이미지가 가까이있을 때만 이미지가로드됩니다. 현재 Chrome에서만 지원되지만보다 널리 지원되는 기술을 직접 작성할 수 있습니다.

위 내용은 Flexbox가있는 적응 형 사진 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!