종횡비를 유지하면서 Div 내에 이미지를 꼭 맞게 맞추는 방법은 무엇입니까?

Div 내에서 이미지의 가로 세로 비율 유지

질문:

Div 내에서 이미지를 꼭 맞게 맞추는 방법 가로세로 비율을 유지하면서 이미지의 어떤 부분도 잘리지 않도록 합니다. 왜곡되었습니까?

답변:

CSS를 사용하여 이를 달성하려면 다음 속성을 활용하십시오.

img {
  max-height: 100%;
  max-width: 100%;
}

1. max- height: 100%;: 이미지의 최대 높이를 이미지 높이의 100%로 설정합니다. 컨테이너 사업부 이렇게 하면 이미지가 div의 높이를 오버플로하지 않습니다.
2. max-width: 100%;: max-height와 유사하지만 너비에 해당합니다. 이렇게 하면 이미지의 최대 너비가 컨테이너 div의 100%로 설정됩니다.

설명:

이 두 속성을 결합하면 이미지가 효과적으로 축소됩니다. 원래 종횡비를 유지하면서 div 내에 맞도록 합니다. 이미지는 비례적으로 축소되어 잘리거나 왜곡되는 부분이 없도록 합니다.

추가 참고 사항:

1. div 내에서 이미지를 중앙에 배치하려는 경우 , 다음 CSS를 추가하세요 속성:

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 또는 object-fit 속성을 사용하여 유사한 결과를 얻을 수 있지만 모든 브라우저에서 지원되지는 않을 수 있습니다.

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