종횡비를 유지하면서 이미지로 Div를 채우는 방법은 무엇입니까?

비율을 유지하면서 Div에 이미지 채우기

웹 개발 시 div 요소 내에 이미지를 표시해야 하는 경우가 있습니다. 이미지의 가로 세로 비율은 그대로 유지됩니다. 이는 까다로운 문제일 수 있지만 CSS Flexbox와 신중한 이미지 크기 조정을 결합하면 해결책이 있습니다.

이 시나리오를 고려해 보세요. 고정된 크기와 그 안에 이미지가 있는 div 요소가 있습니다. 가로 방향이든 세로 방향이든 상관없이 이미지가 항상 div를 채우길 원합니다. div에 오버플로: 숨겨진 세트가 있어서 이미지가 잘리는 경우에도 이 요구 사항을 충족할 수 있습니다.

이 효과를 얻으려면 다음 단계를 따르세요.

• 너비와 높이를 제거하세요. 이미지 태그의 속성을 사용하여 종횡비를 유지합니다.
• 디스플레이에 Flexbox를 사용하도록 div 요소를 설정합니다. flex.
• justify-content 사용: center 및 align-items: div 중심으로 이미지를 중앙에 배치합니다.
• 오버플로 추가: 확장된 초과 이미지를 자르려면 div에 숨김 추가 크기를 초과합니다.
• div 내의 이미지 스타일을 다음과 같이 지정합니다. 다음은 다음과 같습니다.

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

• flex-shrink: 0은 div가 작아져도 이미지가 축소되지 않도록 보장합니다.
• 최소 너비: 100% min-height: 100%는 이미지가 항상 적어도 크기만큼 커지도록 보장합니다. div.

이 기술을 사용하면 방향에 관계없이 비율을 유지하면서 div를 이미지로 채울 수 있습니다.

위 내용은 종횡비를 유지하면서 이미지로 Div를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!