균일한 이미지 크기를 갖춘 반응형 이미지 갤러리

[gyun님]

               균일한 이미지 크기를 갖춘 반응형 이미지 갤러리

균일한 이미지 크기를 갖춘 반응형 이미지 갤러리
첫 번째 프로젝트는 아래와 같이 간단한 레이아웃을 사용합니다.

그리드 레이아웃에 동일한 크기의 9개 이미지를 표시하는 Flexbox 프로젝트 1

이 갤러리 레이아웃은 균일한 이미지 크기에 이상적입니다.

이 첫 번째 Flexbox 프로젝트를 만들려면 HTML 파일을 만들고 다음 마크업을 추가해 보겠습니다.

<div class="container">
  <!-- heading text -->
  <ul class="image-gallery"<li>
      <img src="https://source.unsplash.com/VWcPlbHglYc/640x416" alt="" />
      <div class="overlay"><span>Image title</span></div>
    </li>
    <!-- other items here -->
  </ul>
</div>

  반응형 이미지 갤러리 레이아웃 사용자 정의

반응형 이미지 갤러리 레이아웃 사용자 정의
이제 flexbox를 도입하여 이미지를 레이아웃할 수 있습니다. 초점은 ul모든 이미지 항목을 포함하는 래퍼 요소에 있습니다.


20만 명이 넘는 개발자가 LogRocket을 사용하여 더 나은 디지털 경험을 만듭니다.

자세히 알아보기 →
먼저 래퍼 속성을 로 ul설정하여 래퍼를 플렉스 컨테이너로 만들어야 합니다 . 이렇게 하면 직계 자식( 요소)이 플렉스 항목이 됩니다.displayflexli

. 이미지 - 갤러리  { 디스플레이 : 플렉스 ; }
  
이제 모든 플렉스 항목이 즉시 주축에 정렬됩니다. 기본적으로 주 축은 행 차원입니다. 이 동작은 Flexbox가 1차원 레이아웃 모델인 결과입니다.

현재 이미지가 맞지 않기 때문에 뷰포트에서 오버플로됩니다. Flex 컨테이너에 적용된 스타일을 업데이트하고 Flex 항목에도 스타일을 적용하여 이 문제를 해결하겠습니다. CSS를 업데이트하여 다음을 얻습니다.

. 이미지 - 갤러리  { 디스플레이 : 플렉스 ; 플렉스 - 랩 : 랩 ; 정당화 - 내용 : 센터 ; 간격 : 10px ; } . 이미지 - 갤러리 > li { 플렉스 - 기준 : 350px ; /* 너비: 350px; */ } . 이미지 - 갤러리 li img { 개체 - 맞춤 : 표지 ; 최대 - 너비 : 100 % ; 높이 : 자동 ; 수직 - 정렬 : 중간 ; 테두리 - 반경 : 5px ; }
  
  
  
   


   
    


   
  
   
   
  
   
Flex 컨테이너에 적용되는 스타일을 자세히 살펴보겠습니다.

이 속성은 플렉스 항목이 다른 줄로 넘어가도록 보장합니다.flex-wrap
값이 값인 속성은 주축 의 중심에 항목을 지정합니다.justify-contentcenter
이 gap속성은 행과 열 사이의 간격을 설정합니다(이 경우 10px) .
플렉스 아이템에는 . 모든 플렉스 아이템은 원래 크기에서 늘어나거나 줄어들 수 있습니다. 기본적으로 다음과 같은 선언이 있습니다: , 및 . 즉, 크기가 정의되지 않은 경우 플렉스 항목은 기본 콘텐츠 크기를 사용합니다. 우리의 경우 크기를 . 따라서 개별 항목의 너비 값은 . 기본 증가 및 축소 값을 사용하면 항목이 가변 기반에서 컨테이너에 맞게 축소될 수 있지만 컨테이너에서 확장되지는 않습니다. 아래의 두 번째 프로젝트에서는 Flex 항목을 초기 길이에서 늘리는 방법에 대해 설명합니다.flex-basis: 350px;flex-grow: 0flex-shrink: 1flex-basis: auto350px350px

이미지에 적용한 것은 종횡비를 유지하고 딱 맞게 클립되도록 합니다. 마지막으로 이미지를 추가 하고 반응성이 뛰어나며 확장이 잘 되는지 확인합니다. 대신에 and를 사용할 수도 있습니다 . 결국 레이아웃은 다음과 같습니다.object-fit: cover;max-width: 100%;height: auto;width: 100%;height: 100%;
         
       
    
    
  

--------------------------------------

우리는 ul요소를 사용하여 에 있는 이미지 컬렉션을 그룹화했습니다 li. 와 같은 다른 요소를 사용할 수도 있습니다 div. 간결하게 하기 위해 위의 코드 블록은 컨테이너 내의 항목 하나만 표시합니다 ul. CodeSandbox 에서 전체 마크업을 확인하세요 .

모든 li요소에는 이미지 위로 마우스를 가져갈 때마다 오버레이를 표시하는 요소 img와 함께 요소가 포함되어 있습니다. 이 프로젝트에서는 무료 이미지를div 사용 하고 소스 URL에 동일한 크기를 추가하여 동일한 크기의 이미지를 얻습니다.

현재는 스타일이 적용되지 않으므로 이미지는 기본적으로 서로 겹쳐 쌓이게 됩니다.

[gyun님]

https://blog.logrocket.com/responsive-image-gallery-css-flexbox/