CSS Flexbox 컨테이너 내부 이미지의 종횡비를 어떻게 유지합니까?

Flex Box 이미지의 가로 세로 비율 유지

주어진 문제에서 설명했듯이 이미지가 CSS Flex 상자 컨테이너 내에 배치되면 용기의 너비에 맞게 늘어나거나 줄어드는 경향이 있습니다. 그러나 특정 시나리오에서는 이미지의 원래 가로 세로 비율을 유지하는 것이 바람직할 수 있습니다.

Flex Box를 사용하여 이를 달성하려면 다음 두 가지 가능한 솔루션이 있습니다.

1. 'object-fit' 속성 사용:

'object-fit' 속성을 이미지에 적용하여 이미지 비율을 유지하면서 상위 컨테이너 내로 이미지를 제한할 수 있습니다. 'object-fit'을 'contain'으로 설정하면 이미지의 비율이 왜곡되지 않고 사용 가능한 공간에 맞게 크기가 조정됩니다.

2. Flex 특정 규칙 사용:

또 다른 접근 방식은 Flex 특정 규칙을 활용하여 원하는 효과를 얻는 것입니다:

• 'align-self: center;': 이미지가 잘리는 것을 방지하기 위해 컨테이너 내에서 이미지를 수직으로 정렬합니다. off.
• 'flex: 0 0 auto;': 이미지의 초기 크기를 0으로 설정하고 가로세로 비율을 유지하면서 사용 가능한 공간에 맞춰 조정할 수 있습니다.

이러한 기술을 적용하면 플렉스 박스 컨테이너 내의 이미지가 종횡비를 유지하여 사용 가능한 이미지에 관계없이 비율이 유지되도록 할 수 있습니다. 공간.

위 내용은 CSS Flexbox 컨테이너 내부 이미지의 종횡비를 어떻게 유지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!