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 중국어 웹사이트의 기타 관련 기사를 참조하세요!