CSS Flexbox를 사용하여 적응형 이미지를 만드는 방법

. 그런 다음 필요할 때 '를 설정하여 이미지가 다음 줄로 넘어가도록 허용합니다. 플렉스 랩 ” 속성 값을 “ 로 포장하다 '.

다음으로 '를 지정하여 이미지에 CSS를 적용합니다. img ' 와 함께 ' .images-컨테이너 ' 이름. 먼저 “ 몸을 풀다 ” 속성 값을 “ 로 1 '를 사용하여 이미지 간에 사용 가능한 여유 공간을 균등하게 분배합니다. 그런 다음 “ 최대 너비 ” 속성 값을 “ 로 100% '를 사용하여 이미지가 원래 너비를 초과하지 않도록 합니다. 설정 ' 키 ” 속성 값을 “ 로 자동 ”를 선택하여 종횡비를 유지합니다. 마지막으로 '를 설정하여 이미지 사이에 간격을 추가합니다. 여유 ” 속성 값을 “ 로 10px ':

.images-컨테이너 {
표시하다: 몸을 풀다 ;
플렉스 랩: 랩;
}

.이미지-컨테이너 img {
몸을 풀다: 1 ;
최대 너비: 100 % ;
높이: 자동;
여백: 10px;
}

포장 전

CSS Flexbox를 사용하여 적응형 이미지가 성공적으로 생성되었습니다. 아래 출력 보기는 브라우저 창을 감싸기 전의 것입니다.

포장 후

이제 브라우저 창을 래핑하여 이미지가 적응형인지 아닌지 확인하겠습니다.

위 이미지는 추가된 이미지가 적응형임을 확인시켜 줍니다.

결론

CSS Flexbox를 사용하여 적응형 이미지를 생성하려면 사용자는 먼저 HTML 구조를 생성한 다음