CSS

CSS オブジェクトフィットプロパティ

by TheVOS posted Dec 04, 2019
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

ESC閉じる

Larger Font Smaller Font 上へ 下へ Go comment 印刷
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 [ja]コメント 

上へ 下へ Go comment 印刷

Articles

1 2