>  기사  >  웹 프론트엔드  >  CSS를 사용하여 이미지 크기를 비례적으로 조정하는 방법

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

王林
王林원래의
2020-11-16 11:51:4325588검색

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

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

속성 소개:

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.