HTML 이미지 요소로 CSS `배경 크기: 커버` 동작을 달성하려면 어떻게 해야 합니까?

HTML 요소로 이미지 덮기 및 포함

CSS의 background-size: 덮개 및 포함 속성은 배경에 대한 유연한 이미지 크기 조정을 제공합니다. 그러나 HTML 요소를 사용하여 표시되는 이미지에 대해 유사한 제어를 원하는 경우 어떻게 해야 합니까? 방법은 다음과 같습니다.

해결책 1: object-fit 속성

object-fit 속성을 사용하면 이미지가 컨테이너 내에 들어가는 방식을 지정할 수 있습니다. Cover로 설정하면 background-size:cover의 동작을 복제하고 가로 세로 비율을 유지하면서 전체 컨테이너를 채우도록 이미지 크기를 조정합니다.

img {
  object-fit: cover;
}

참고: IE는 객체를 지원하지 않습니다. -맞습니다.

위 내용은 HTML 이미지 요소로 CSS `배경 크기: 커버` 동작을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!