CSS를 사용하여 이미지 크기를 비례적으로 조정하는 방법

CSS를 사용하여 이미지 크기를 비례적으로 조정하는 방법: [object-fit:cover;]와 같이 object-fit 속성을 사용하여 이를 달성할 수 있습니다. object-fit 속성은 요소의 내용이 지정된 컨테이너의 높이와 너비 내에 어떻게 맞아야 하는지를 지정합니다.

속성 소개:

object-fit 속성은 요소의 콘텐츠가 지정된 컨테이너의 높이와 너비에 어떻게 적응해야 하는지를 지정합니다.

(학습 동영상 공유: css 동영상 튜토리얼)

object-fit은 일반적으로 img 및 video 태그에 사용됩니다. 일반적으로 이러한 요소는 원래 비율을 유지하면서 잘라내거나 크기를 조정하거나 직접 늘릴 수 있습니다.

구문: ​​

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

속성 값:

• fill 기본적으로 원래 비율은 보장되지 않으며 전체 콘텐츠 컨테이너를 채우도록 콘텐츠가 늘어납니다.

• contain 원래 크기 비율을 유지하세요. 콘텐츠의 크기가 조정됩니다.

• 커버는 원래 크기 비율을 유지합니다. 단, 일부 내용이 잘릴 수 있습니다.

• none은 원래 요소 콘텐츠의 길이와 너비를 유지하므로 콘텐츠가 재설정되지 않습니다.

• 축소는 원래 크기 비율을 유지합니다. 콘텐츠의 크기는 none 또는 contain 과 동일하며 둘 중 어느 쪽이든 더 작은 개체가 됩니다.

• initial 기본값으로 설정

• inherit 이 요소의 상위 요소에서 속성을 상속합니다.

예:

이미지를 자르고 원래 비율을 유지하세요:

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

관련 권장 사항: CSS 튜토리얼

위 내용은 CSS를 사용하여 이미지 크기를 비례적으로 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!