본문으로 건너뛰기

전체보기
전체보기

메뉴보기 search
메뉴얼
THEVOS WebMail
         
배경이미지

메뉴얼

공지사항

✔ 뷰어로 보기
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
첨부 '5694'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
  1. 04Dec
    by TheVOS
    2019/12/04 in CSS
    Views 52 

    CSS object-fit 속성

  2. No Image 28Nov
    by THEVOS
    2019/11/28 in CSS
    Views 111 

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

쓰기
Board Pagination Prev 1 Next
/ 1

고객의 비지니스 스타일의 가치를 소중히하는 기업 THEVOS 입니다. THEVOS는 귀사의 긴밀한 외부 IT팀 입니다.

주식회사 자보스 ECO 연구소

  • 812-0029　일본 후쿠오카현 후쿠오카시 하카타구 코몬도마치10-5-501
  • 한국：070-4809-0019 일본：080-3984-5969
  • webmaster@thevos.jp

Copyright © 2009/2024 株式会社ザボスECO研究所. All Rights Reserved.

Design by THEVOS
CLOSE