메뉴얼

  2. 메뉴얼
고객센터 메뉴얼
✔ 뷰어로 보기
CSS

CSS object-fit 속성

by TheVOS posted Dec 04, 2019
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
원문출처 https://www.w3schools.com/css/css3_object-fit.asp

object-fit 속성은 IMG, VIDEO 태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다.


브라우저 지원

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

Propertyicon-chrome1.png icon-edge.png icon-firefox1.png icon-safari1.png icon-opera1.png
object-fit31.016.036.07.119.0
특징설명
기본 값object-fit : 개별적 속성
상속안됨
애니메이션안됨
적용-
버전CSS3

정의(Definition)

  • object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.

문법(Syntax)

object-fit: fill | contain | cover | scale-down | none

속성(Property)

속성값설명
fill컨텐츠 사이즈 크기에 맞게 설정합니다.
contain컨텐츠의 가로 값을 기준으로 맞게 설정합니다.
cover컨텐츠 화면 사이즈에 맞게 설정합니다.
scale-down컨텐츠 크기 보다 작게 설정합니다.


Original

FILL

CONTAIN

COVER

NONE

SCALE-DOWN




object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;


Facebook [ko]댓글 

Atachment
첨부 '5254'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?

  1. CSS object-fit 속성

    object-fit 속성은 IMG, VIDEO 태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다. 브라우저 지원 테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다. Property object-fit31.016.036.07.119.0 특징설명기본 값object-fit : 개별...
    Date2019.12.04 CategoryCSS Views52
    Read More
  2. Css 텍스트 외곽선 처리하기, Stroke

    Css 텍스트 외곽선 처리하기, Stroke

    CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법을 알아봅니다.외곽선은 텍스트를 강조하는 효과적인 방법입니다. 간단하게 css를 사용하여 사용하는 것이 가능한데 가장 간단한 방법은 아래처럼 -webkit-text-stroke를 사용하는 방법입니다.-webkit...
    Date2019.11.28 CategoryCSS Views111
    Read More
쓰기
Board Pagination Prev 1 Next
/ 1